iOS: slider add property slideStyle

doric-demo/src/SliderDemo.ts

@@ -8,16 +8,13 @@ const imageUrls = [
     'http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg',
     'http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg',
     'http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1354c94a704ac1ea8d3fd1f4439.jpg',
-    'http://calonye.com/wp-content/uploads/2015/08/0-wx_fmtgiftpwebpwxfrom5wx_lazy1-9.gif',
     'http://hbimg.b0.upaiyun.com/ca29ea125b7f2d580f573e48eb594b1ef509757f34a08-m0hK45_fw658',
-    'https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png',
     'http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
     'http://f.hiphotos.baidu.com/image/pic/item/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg',
     'http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg',
     'http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg',
     'http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg',
     'http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1354c94a704ac1ea8d3fd1f4439.jpg',
-    'http://calonye.com/wp-content/uploads/2015/08/0-wx_fmtgiftpwebpwxfrom5wx_lazy1-9.gif',
 ]
 @Entry
 class SliderPanel extends Panel {
@@ -28,7 +25,11 @@ class SliderPanel extends Panel {
                 return slideItem(image({
                     imageUrl: imageUrls[idx % imageUrls.length],
                     scaleType: ScaleType.ScaleAspectFit,
-                    layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST).configHeight(LayoutSpec.MOST).configAlignment(gravity().center()),
+                    layoutConfig: layoutConfig()
+                        .configWidth(LayoutSpec.MOST)
+                        .configHeight(LayoutSpec.MOST)
+                        .configAlignment(gravity().center())
+                    //.configMargin({ left: 30, right: 30, top: 30, bottom: 30 }),
                 })).also(it => {
                     let start = idx
                     it.onClick = () => {
@@ -37,6 +38,7 @@ class SliderPanel extends Panel {
                 })
             },
             loop: true,
+            slideStyle: { type: "zoomOut", minScale: 0.1, maxScale: 1 },
             layoutConfig: {
                 widthSpec: LayoutSpec.MOST,
                 heightSpec: LayoutSpec.MOST,

doric-iOS/Pod/Classes/Shader/DoricSliderNode.m

@@ -43,6 +43,9 @@ @interface DoricSliderNode () <UICollectionViewDataSource, UICollectionViewDeleg
 @property(nonatomic, copy) NSString *renderPageFuncId;
 @property(nonatomic, copy) NSString *propRenderPageFuncId;
 @property(nonatomic, assign) BOOL needResetScroll;
+@property(nonatomic, strong) NSString *slideStyle;
+@property(nonatomic, assign) CGFloat minScale;
+@property(nonatomic, assign) CGFloat maxScale;
 @end
 
 @interface DoricSliderView : UICollectionView
@@ -56,6 +59,8 @@ - (instancetype)initWithContext:(DoricContext *)doricContext {
     if (self = [super initWithContext:doricContext]) {
         _itemViewIds = [NSMutableDictionary new];
         _batchCount = 15;
+        _minScale = .618f;
+        _maxScale = 1.f;
     }
     return self;
 }
@@ -94,6 +99,14 @@ - (void)blendView:(UICollectionView *)view forPropName:(NSString *)name propValu
         self.propLoop = [prop boolValue];
     } else if ([@"bounces" isEqualToString:name]) {
         self.view.bounces = [prop boolValue];
+    } else if ([@"slideStyle" isEqualToString:name]) {
+        if ([prop isKindOfClass:NSDictionary.class]) {
+            self.slideStyle = prop[@"type"];
+            self.maxScale = [prop[@"maxScale"] floatValue];
+            self.minScale = [prop[@"minScale"] floatValue];
+        } else if ([prop isKindOfClass:NSString.class]) {
+            self.slideStyle = prop;
+        }
     } else {
         [super blendView:view forPropName:name propValue:prop];
     }
@@ -123,7 +136,7 @@ - (void)afterBlended:(NSDictionary *)props {
 
     // handle loop
     self.loop = self.propLoop;
-    
+
 
     __weak typeof(self) _self = self;
     if (needToScroll) {
@@ -131,7 +144,7 @@ - (void)afterBlended:(NSDictionary *)props {
             __strong typeof(_self) self = _self;
 
             [self.view reloadData];
-            
+
             int position = self.loop ? 1 : 0;
             if (self.view.width == 0) {
                 self.needResetScroll = true;
@@ -267,6 +280,19 @@ - (void)blendSubNode:(NSDictionary *)subModel {
     }];
 }
 
+- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
+    if ([self.slideStyle isEqualToString:@"zoomOut"]) {
+        CGFloat centerX = scrollView.width / 2.f;
+        [self.view.visibleCells forEach:^(__kindof UICollectionViewCell *obj) {
+            CGFloat vCenterX = obj.centerX - scrollView.contentOffset.x;
+            CGFloat percent = ABS(vCenterX - centerX) / centerX;
+            CGFloat scale = self.maxScale - (self.maxScale - self.minScale) * percent;
+            obj.transform = CGAffineTransformScale(CGAffineTransformIdentity, scale, scale);
+            obj.layer.anchorPoint = CGPointMake(0.5f, 0.5f);
+        }];
+    }
+}
+
 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
     NSUInteger pageIndex = (NSUInteger) (scrollView.contentOffset.x / scrollView.width);
     scrollView.contentOffset = CGPointMake(pageIndex * scrollView.width, scrollView.contentOffset.y);

doric-web/dist/index.js

@@ -3670,8 +3670,8 @@ __decorate$9([
 ], Slider.prototype, "bounces", void 0);
 __decorate$9([
     Property,
-    __metadata$9("design:type", String)
+    __metadata$9("design:type", Object)
-], Slider.prototype, "pageTransformer", void 0);
+], Slider.prototype, "slideStyle", void 0);
 function slider(config) {
     const ret = new Slider;
     ret.apply(config);