feat:iOS support transform properties
This commit is contained in:
parent
f5f157a0b6
commit
2fb05f9dc1
@ -32,6 +32,11 @@ class AnimatorDemo extends Panel {
|
|||||||
view.rotation = 0
|
view.rotation = 0
|
||||||
view.bgColor = colors[2]
|
view.bgColor = colors[2]
|
||||||
view.corners = 0
|
view.corners = 0
|
||||||
|
view.scaleX = 1
|
||||||
|
view.scaleY = 1
|
||||||
|
view.translationX = 0
|
||||||
|
view.translationY = 0
|
||||||
|
view.rotation = 0
|
||||||
},
|
},
|
||||||
duration: 1500,
|
duration: 1500,
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
@ -126,6 +131,37 @@ class AnimatorDemo extends Panel {
|
|||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
]).apply({ space: 10 } as IHLayout),
|
]).apply({ space: 10 } as IHLayout),
|
||||||
|
|
||||||
|
hlayout([
|
||||||
|
thisLabel('scaleX').apply({
|
||||||
|
onClick: () => {
|
||||||
|
animate(this)({
|
||||||
|
animations: () => {
|
||||||
|
if (view.scaleX) {
|
||||||
|
view.scaleX += 0.1
|
||||||
|
} else {
|
||||||
|
view.scaleX = 1.1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
duration: 1000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
thisLabel('scaleY').apply({
|
||||||
|
onClick: () => {
|
||||||
|
animate(this)({
|
||||||
|
animations: () => {
|
||||||
|
if (view.scaleY) {
|
||||||
|
view.scaleY += 0.1
|
||||||
|
} else {
|
||||||
|
view.scaleY = 1.1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
duration: 1000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
]).apply({ space: 10 } as IHLayout),
|
||||||
]
|
]
|
||||||
).apply({ space: 10 } as IVLayout),
|
).apply({ space: 10 } as IVLayout),
|
||||||
stack([
|
stack([
|
||||||
|
@ -68,6 +68,15 @@ CGPathRef DoricCreateRoundedRectPath(CGRect bounds,
|
|||||||
|
|
||||||
@interface DoricViewNode ()
|
@interface DoricViewNode ()
|
||||||
@property(nonatomic, strong) NSMutableDictionary *callbackIds;
|
@property(nonatomic, strong) NSMutableDictionary *callbackIds;
|
||||||
|
@property(nonatomic, copy) NSNumber *translationX;
|
||||||
|
@property(nonatomic, copy) NSNumber *translationY;
|
||||||
|
@property(nonatomic, copy) NSNumber *scaleX;
|
||||||
|
@property(nonatomic, copy) NSNumber *scaleY;
|
||||||
|
@property(nonatomic, copy) NSNumber *rotation;
|
||||||
|
@property(nonatomic, copy) NSNumber *rotationX;
|
||||||
|
@property(nonatomic, copy) NSNumber *rotationY;
|
||||||
|
@property(nonatomic, copy) NSNumber *pivotX;
|
||||||
|
@property(nonatomic, copy) NSNumber *pivotY;
|
||||||
@end
|
@end
|
||||||
|
|
||||||
@implementation DoricViewNode
|
@implementation DoricViewNode
|
||||||
@ -79,7 +88,6 @@ - (instancetype)initWithContext:(DoricContext *)doricContext {
|
|||||||
return self;
|
return self;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
- (void)initWithSuperNode:(DoricSuperNode *)superNode {
|
- (void)initWithSuperNode:(DoricSuperNode *)superNode {
|
||||||
if ([self isKindOfClass:[DoricSuperNode class]]) {
|
if ([self isKindOfClass:[DoricSuperNode class]]) {
|
||||||
((DoricSuperNode *) self).reusable = superNode.reusable;
|
((DoricSuperNode *) self).reusable = superNode.reusable;
|
||||||
@ -104,6 +112,27 @@ - (void)blend:(NSDictionary *)props {
|
|||||||
id value = props[key];
|
id value = props[key];
|
||||||
[self blendView:self.view forPropName:key propValue:value];
|
[self blendView:self.view forPropName:key propValue:value];
|
||||||
}
|
}
|
||||||
|
[self transformProperties];
|
||||||
|
}
|
||||||
|
|
||||||
|
- (void)transformProperties {
|
||||||
|
CGAffineTransform transform = CGAffineTransformIdentity;
|
||||||
|
if (self.translationX || self.translationY) {
|
||||||
|
transform = CGAffineTransformTranslate(transform, [self.translationX floatValue] ?: 0, [self.translationY floatValue] ?: 0);
|
||||||
|
}
|
||||||
|
if (self.scaleX || self.scaleY) {
|
||||||
|
transform = CGAffineTransformScale(transform, [self.scaleX floatValue] ?: 1, [self.scaleY floatValue] ?: 1);
|
||||||
|
}
|
||||||
|
if (self.rotation) {
|
||||||
|
transform = CGAffineTransformRotate(transform, (self.rotation.floatValue ?: 0) * M_PI);
|
||||||
|
}
|
||||||
|
if (!CGAffineTransformEqualToTransform(transform, self.view.transform)) {
|
||||||
|
self.view.transform = transform;
|
||||||
|
}
|
||||||
|
if (self.pivotX || self.pivotY) {
|
||||||
|
self.view.layer.anchorPoint = CGPointMake(self.pivotX.floatValue
|
||||||
|
?: 0.5f, self.pivotY.floatValue ?: 0.5f);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
- (void)blendView:(UIView *)view forPropName:(NSString *)name propValue:(id)prop {
|
- (void)blendView:(UIView *)view forPropName:(NSString *)name propValue:(id)prop {
|
||||||
@ -123,8 +152,6 @@ - (void)blendView:(UIView *)view forPropName:(NSString *)name propValue:(id)prop
|
|||||||
view.y = [(NSNumber *) prop floatValue];
|
view.y = [(NSNumber *) prop floatValue];
|
||||||
} else if ([name isEqualToString:@"bgColor"]) {
|
} else if ([name isEqualToString:@"bgColor"]) {
|
||||||
view.backgroundColor = DoricColor(prop);
|
view.backgroundColor = DoricColor(prop);
|
||||||
} else if ([name isEqualToString:@"rotation"]) {
|
|
||||||
[self setRotation:prop];
|
|
||||||
} else if ([name isEqualToString:@"layoutConfig"]) {
|
} else if ([name isEqualToString:@"layoutConfig"]) {
|
||||||
if (self.superNode && [prop isKindOfClass:[NSDictionary class]]) {
|
if (self.superNode && [prop isKindOfClass:[NSDictionary class]]) {
|
||||||
[self.superNode blendSubNode:self layoutConfig:prop];
|
[self.superNode blendSubNode:self layoutConfig:prop];
|
||||||
@ -181,6 +208,24 @@ - (void)blendView:(UIView *)view forPropName:(NSString *)name propValue:(id)prop
|
|||||||
view.clipsToBounds = YES;
|
view.clipsToBounds = YES;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
} else if ([name isEqualToString:@"translationX"]) {
|
||||||
|
self.translationX = prop;
|
||||||
|
} else if ([name isEqualToString:@"translationY"]) {
|
||||||
|
self.translationY = prop;
|
||||||
|
} else if ([name isEqualToString:@"scaleX"]) {
|
||||||
|
self.scaleX = prop;
|
||||||
|
} else if ([name isEqualToString:@"scaleY"]) {
|
||||||
|
self.scaleY = prop;
|
||||||
|
} else if ([name isEqualToString:@"pivotX"]) {
|
||||||
|
self.pivotX = prop;
|
||||||
|
} else if ([name isEqualToString:@"pivotY"]) {
|
||||||
|
self.pivotY = prop;
|
||||||
|
} else if ([name isEqualToString:@"rotation"]) {
|
||||||
|
self.rotation = prop;
|
||||||
|
} else if ([name isEqualToString:@"rotationX"]) {
|
||||||
|
self.rotationX = prop;
|
||||||
|
} else if ([name isEqualToString:@"rotationY"]) {
|
||||||
|
self.rotationY = prop;
|
||||||
} else {
|
} else {
|
||||||
DoricLog(@"Blend View error for View Type :%@, prop is %@", self.class, name);
|
DoricLog(@"Blend View error for View Type :%@, prop is %@", self.class, name);
|
||||||
}
|
}
|
||||||
@ -236,20 +281,6 @@ - (NSNumber *)getHeight {
|
|||||||
return @(self.view.height);
|
return @(self.view.height);
|
||||||
}
|
}
|
||||||
|
|
||||||
- (void)setRotation:(NSNumber *)rotation {
|
|
||||||
if (rotation.floatValue == 0) {
|
|
||||||
self.view.transform = CGAffineTransformIdentity;
|
|
||||||
} else {
|
|
||||||
self.view.transform = CGAffineTransformMakeRotation(M_PI * rotation.floatValue);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
- (NSNumber *)getRotation {
|
|
||||||
float radius = atan2f((float) self.view.transform.b, (float) self.view.transform.a);
|
|
||||||
float degree = (float) (radius / M_PI);
|
|
||||||
return @(degree);
|
|
||||||
}
|
|
||||||
|
|
||||||
- (void)blendLayoutConfig:(NSDictionary *)params {
|
- (void)blendLayoutConfig:(NSDictionary *)params {
|
||||||
[params[@"widthSpec"] also:^(NSNumber *it) {
|
[params[@"widthSpec"] also:^(NSNumber *it) {
|
||||||
if (it) {
|
if (it) {
|
||||||
|
Reference in New Issue
Block a user