加入购物车的粒子动画
lr0256
8年前
<p style="text-align: center;"><img src="https://simg.open-open.com/show/b2cc72342d172af43f502da7a5c06685.gif"></p> <h3><strong>调用方式为直接调用CALayer的静态方法</strong></h3> <p>[CALayer startAnimatAtBeginView:btn endView:weakself.cartView finished:nil];</p> <pre> <code class="language-objectivec">/** * 加入购物车的粒子动画 * * @param begiView 开始地方的View * @param endView 结束地方的View * @param finished 动画结束回调 */ + (void)startAnimatAtBeginView:(UIView *)begiView endView:(UIView *)endView finished:(void(^)(void))finished;</code></pre> <h3><strong>内部实现</strong></h3> <pre> <code class="language-objectivec">+ (void)startAnimatAtBeginView:(UIView *)begiView endView:(UIView *)endView finished:(void(^)(void))finished { UIWindow *window = [UIApplication sharedApplication].keyWindow; //获取动画起始点和结束点 CGPoint startPoint = [begiView convertRect: begiView.bounds toView:window].origin; CGPoint endPoint = [endView convertRect: endView.bounds toView:window].origin; endPoint.x = endPoint.x + endView.bounds.size.width*0.5; endPoint.y = endPoint.y + endView.bounds.size.height*0.5; //设置粒子 CALayer *dotLayer = [CALayer layer]; dotLayer.backgroundColor = [UIColor redColor].CGColor; dotLayer.frame = CGRectMake(0, 0, 15, 15); dotLayer.cornerRadius = 15 /2; [window.layer addSublayer:dotLayer]; dotLayer.endView = endView; dotLayer.finished = finished; //设置贝塞尔曲线 UIBezierPath *path= [UIBezierPath bezierPath]; [path moveToPoint:startPoint]; //三点曲线,设置路径 [path addCurveToPoint:endPoint controlPoint1:startPoint controlPoint2:CGPointMake(startPoint.x - 180, startPoint.y - 150)]; //设置动画组 CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; animation.path = path.CGPath; animation.rotationMode = kCAAnimationRotateAuto; CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"alpha"]; alphaAnimation.duration = 0.1f; alphaAnimation.fromValue = [NSNumber numberWithFloat:1.0]; alphaAnimation.toValue = [NSNumber numberWithFloat:0.1]; alphaAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; CAAnimationGroup *groups = [CAAnimationGroup animation]; groups.animations = @[animation,alphaAnimation]; groups.duration = 0.5f; groups.removedOnCompletion = NO; groups.fillMode = kCAFillModeForwards; groups.delegate = dotLayer; [groups setValue:@"groupsAnimation" forKey:@"animationName"]; [dotLayer addAnimation:groups forKey:nil]; }</code></pre> <h3><strong>粒子动画结束</strong></h3> <pre> <code class="language-objectivec">- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag { if ([[anim valueForKey:@"animationName"]isEqualToString:@"groupsAnimation"]) { !self.finished? :self.finished(); CABasicAnimation *shakeAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; shakeAnimation.duration = 0.1f; shakeAnimation.fromValue = [NSNumber numberWithFloat:0.7]; shakeAnimation.toValue = [NSNumber numberWithFloat:1]; shakeAnimation.autoreverses = YES; [self.endView.layer addAnimation:shakeAnimation forKey:nil]; [self removeFromSuperlayer]; } }</code></pre> <p> </p> <p>来自:http://www.jianshu.com/p/a726ae8526fc</p> <p> </p>