美文网首页
更炫的动画

更炫的动画

作者: 小橘子成长记 | 来源:发表于2018-08-01 15:21 被阅读12次

    效果图

    未标题-1.gif

    渐变:将一幅图像混合成另一幅图像的动画,如背景变换。

    主要代码
    //transitionCrossDissolve旧视图溶解消失显示下一个新视图的效果, imageView:要换图片的imageview,newImage:更换的新图片
    UIView.transition(with: imageView, duration: 1.0, options: .transitionCrossDissolve, animations: {
          imageView.image = newImage
    }, completion: nil)
    

    模拟3d:使看起来像在一个方块上滚动显示,如航班和登机门显示。使label缩短,看起来像是滚到后面一样

    主要代码
    label.transform = CGAffineTransform(translationX: 0.0, y: -auxLabelOffset).scaledBy(x: 1.0, y: 0.1)
    

    分段:如图中的飞机飞行

    主要代码:
    //创建帧动画,总时长1.5秒
    UIView.animateKeyframes(withDuration: 1.5, delay: 0.0, animations: {
                //添加帧动画,从0秒开始,经过0.25秒
                UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25, animations: {
                    self.planeImage.center.x += 80.0//飞机向右飞80
                    self.planeImage.center.y -= 10.0//向上10
                })
                //添加帧动画,从0.1秒开始,经过0.4秒
                UIView.addKeyframe(withRelativeStartTime: 0.1, relativeDuration: 0.4) {
                    self.planeImage.transform = CGAffineTransform(rotationAngle: -.pi / 8)//飞机抬头
                }
                UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
                    self.planeImage.center.x += 100.0
                    self.planeImage.center.y -= 50.0
                    self.planeImage.alpha = 0.0
                }
                UIView.addKeyframe(withRelativeStartTime: 0.51, relativeDuration: 0.01) {
                    self.planeImage.transform = .identity
                    self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y)
                }
                UIView.addKeyframe(withRelativeStartTime: 0.55, relativeDuration: 0.45) {
                    self.planeImage.alpha = 1.0
                    self.planeImage.center = originalCenter
                }
            }, completion: nil)
    

    完整代码https://github.com/chenruiming/OrangeFlight

    相关文章

      网友评论

          本文标题:更炫的动画

          本文链接:https://www.haomeiwen.com/subject/wqycvftx.html