更炫的动画

2018-08-01  本文已影响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

上一篇下一篇

猜你喜欢

热点阅读