IOS 添加收藏的动画效果

- (void)showAnimation {
  CGPoint lbCenter = self.headerImageView.center;

  //the image which will play the animation soon
  UIImageView *imageView = [[UIImageView alloc] initWithImage:self.headerImageView.image];
  imageView.contentMode = UIViewContentModeScaleToFill;
  imageView.frame = self.headerImageView.frame;
  imageView.hidden = YES;
  imageView.center = lbCenter;

  //the container of image view
  CALayer *layer = [[CALayer alloc]init];
  layer.contents = imageView.layer.contents;
  layer.frame = imageView.frame;
  layer.opacity = 1;
  layer.cornerRadius = self.headerImageView.corneradus;
  layer.masksToBounds = YES;
  [self.view.layer addSublayer:layer];

  //动画 终点 都以self.view为参考系
  CGPoint endpoint = [self.view convertPoint:_favImageView.center fromView:self.navView];
  UIBezierPath *path = [UIBezierPath bezierPath];
  //动画起点
  CGPoint startPoint = [self.view convertPoint:lbCenter fromView:self.headerImageView.superview];
  [path moveToPoint:startPoint];
  //贝塞尔曲线控制点
  float sx = startPoint.x;
  float sy = startPoint.y;
  float ex = endpoint.x;
  float ey = endpoint.y;
  float x = sx + (ex - sx) / 3;
  float y = sy + (ey - sy) * 0.5 - 110;
  CGPoint centerPoint=CGPointMake(x, y);
  [path addQuadCurveToPoint:endpoint controlPoint:centerPoint];

  //key frame animation to show the bezier path animation
  CAKeyframeAnimation *animation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
  animation.path = path.CGPath;
  animation.removedOnCompletion = NO;
  animation.fillMode = kCAFillModeForwards;
  animation.duration = 1.0;
  animation.delegate = self;
  animation.autoreverses = NO;
  animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
  [layer addAnimation:animation forKey:@"buy"];

  self.headerLayer = layer;
}

- (void)animationDidStart:(CAAnimation *)anim {
  if ([self.headerLayer animationForKey:@"buy"] == anim) {
    DDLogVerbose(@"animation start");
  }
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
  if (flag &&  [self.headerLayer animationForKey:@"buy"] == anim) {
     self.headerLayer.hidden = YES;
    [self.headerLayer removeAnimationForKey:@"buy"];

    [UIView animateWithDuration:0.4 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
      self.headerLayer.opacity = 0.0;
    } completion:^(BOOL finished) {
      if (finished) {
        [self.headerLayer removeFromSuperlayer];

        CGFloat duration = 0.4;
        [UIView animateWithDuration:duration animations:^{
          _favImageView.transform = CGAffineTransformMakeScale(1.55, 1.55);
        } completion:^(BOOL finished) {
          [UIView animateWithDuration:duration animations:^{
            _favImageView.transform = CGAffineTransformIdentity;
          }];
        }];
      }
    }];
  }
}

此文章不是给大家看的,看得懂的自然会明白怎么用!

时间: 2024-07-28 17:10:12

IOS 添加收藏的动画效果的相关文章

Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果(2)_Android

做IOS开发的都知道,IOS提供了一个具有动态开关效果的UISwitch组件,这个组件很好用效果相对来说也很绚丽,当我们去点击开关的时候有动画效果,但遗憾的是Android上并没有给我们提供类似的组件(听说在Android4.0的版本上提供了具有动态效果的开关组件,不过我还没有去看文档),如果我们想实现类似的效果那该怎么办了呢?看来又得去自定义了. 公司的产品最近一直在做升级,主要做的就是把界面做的更绚丽更美观给用户更好的体验(唉,顾客是上帝......),其中的设置功能中就有开关按钮,原来的开

WPS演示中怎么添加闪烁字幕动画效果

  WPS演示中怎么添加闪烁字幕动画效果 1.打开WPS演示,新建有一个幻灯片,为了不影响制作过程,我删除了标题框和副标题框. 2.点击绘图工具栏--自选图形--基本形状--笑脸,在幻灯片中添加该表情动画. 3.右键点击该表情,选择设置对象格式. 4.在颜色与线条选项卡中,填充色选择填充效果. 5.颜色勾选预设,在预设颜色中选择一种效果,确定. 6.右键点击表情,选择自定义动画,在右侧点击添加效果--进入--盒状. 7.开始选择单击时,方向选择内,速度选为快速. 8.再次点击添加效果--动作路径

Swift教程_零基础学习Swift完整实例(八)_swift完整实例(添加View的动画效果、添加View的阴影)

6.添加View的动画效果 本章节主要来做明细页面点击后翻转的动画效果,该效果可以进行多种改变,以达到想要的效果. 1.首先我们需要进行翻转的正反两个view,前面我们已经做好了,分别是PKOElementDetailImageView和PKOElementDetailImageFlippedView,具体翻转动画在明细页面的控制其中进行,触发当然是PKOElementDetailImageView中的点击事件,前文已经提到.2.PKOElementDetailImageView中的点击事件调用

CSS3中Animation为同一个元素添加多个动画效果

CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法,就是说一个元素,只能给它定义一个动画效果,不能同时定义. 需求说明 比如说,我想实现一个这样的动画效果: 一颗星星从上往下滑落,当滑落到指定位置时开始闪烁 这里就用到了两个动画效果: 1. 从上往下滑落 (单次动画) 2. 闪烁 (循环动画) 因为 CSS3 Animation 是不能给星星这个元素同时定义这两个动画效果的,所以我们就只能从其它方向入手了. 思考解决方案 我是这样想的,既然不能同时定义两个动画,那能不

iOS 屏幕解锁文字动画效果_IOS

   CAGradientLayer相信大家都比较熟悉,关于其如何使用,我就不在这里废话了,网上有很多介绍,想详细了解的话,可以去看看.我只简单说下如何利用CAGradientLayer制作屏幕解锁文字动画效果. 1.创建一个CAGradientLayer对象gradLayer,设置它的frame和label.bounds一样(这里要注意一下是Label的bounds不是frame); 2.这里我给gradLayer.colors一共设置了三个颜色值,首尾颜色透明度设置成0.3,中间的颜色值透明

Android仿一点资讯收藏Toast动画效果

最近在做一个项,有一个收藏的功能.后来看到了一点资讯的收藏动画,感觉不错,所有自己就实现了一下. 这是效果: 附上完整的代码,其中Animation_Toast为动画: <div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"></span></div><pre name="code&q

IOS等待时动画效果的实现_IOS

查询时间或长或短,为了提升用户体验,目前用的比较多的手段之一就是查询等待时添加一个动态等待效果.当我们在请求网络时加载页面时有个动作效果,效果图如下: 源代码可以网上找开源项目Coding.net,上面的效果原理为两张图片组合,外面那个则为动画转动,里面的图标则是透明度的变化:主要代码如下: 1:把它封装在EaseLoadingView里面 @interface EaseLoadingView : UIView @property (strong, nonatomic) UIImageView

PowerPoint 2013幻灯片中为对象添加动画效果

         PowerPoint 2013幻灯片中为对象添加动画效果         1.打开演示文稿,在幻灯片中选择需要添加动画效果的对象,如当前幻灯片中的文本框.在"动画"选项卡中单击"动画"组中"动画样式"列表框上的"其他"按钮 ,在打开的下拉列表中选择预设动画,如图1所示. 图1 应用预设动画效果 2.如果"动画样式"列表中没有满意的进入动画效果,用户可以选择列表中的"更多进入效果&

PowerPoint 2013为同一个对象依次应用不同动画效果的方法

  1.启动PowerPoint 2013并打开需要设置多个动画效果的幻灯片,在该幻灯片中选择需要添加动画的对象,然后为其添加第一个动画效果,如图1所示. 图1 添加第一个动画效果 2.在该对象被选择的情况下,再次单击"添加动画"按钮,在获得的下拉列表中选择需要添加的动画效果将其赋予对象,如图2所示.在"动画"选项卡"计时"组的"开始"下拉列表中将该动画效果的开始时间设置为"上一动画之后",如图3所示.这样