swift 添加翻转动画_swift 添加动画 - CSDN
  • Swift3.0 动画(缩放、晃动、翻转)

    千次阅读 2016-12-13 11:17:51
    1.缩放 2.左右摇晃 3.翻转

    Swift3.0写--2.左右晃动

    func shakeAnimation(){
    //移除self.mineTopView.layer上的所有动画,可以避免多次重复添加
    self.mineTopView.layer.removeAllAnimations()
            let momAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
            momAnimation.fromValue = NSNumber(value: -0.1) //左幅度
            momAnimation.toValue = NSNumber(value: 0.1) //右幅度
            momAnimation.duration = 0.1
            momAnimation.repeatCount = HUGE //无限重复
            momAnimation.autoreverses = true //动画结束时执行逆动画
            self.momAnimation.isRemovedOnCompletion = false //切出此界面再回来动画不会停止
    
            self.momAnimation.delegate = self//CAAnimationDelegate 代理中有动画的开始和结束
            self.mineTopView.layer.add(momAnimation, forKey: "centerLayer")
        }
    
    //旋转动画
        func rorateAnimation(holdView: UIView){
    
            let momAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
            momAnimation.fromValue = NSNumber(value: 0) //左幅度
            momAnimation.toValue = NSNumber(value: M_PI*2) //右幅度
            momAnimation.duration = 1
            momAnimation.repeatCount = HUGE //无限重复
            holdView.layer.add(momAnimation, forKey: "centerLayer")
        }

    1.缩放

    - (void)Animation
    {
        // 设定为缩放
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        // 动画选项设定
        animation.duration = 2.0; // 动画持续时间
        animation.repeatCount = HUGE_VALF; // 重复次数(无限)
        animation.autoreverses = YES; // 动画结束时执行逆动画
    
        // 缩放倍数
        animation.fromValue = [NSNumber numberWithFloat:0.9]; // 开始时的倍率
        animation.toValue = [NSNumber numberWithFloat:1.1]; // 结束时的倍率
    
        // 添加动画
        [self.moveView.layer addAnimation:animation forKey:@"scale-layer"];
    }
    

    2.左右晃动

    - (void)animation
    {
     //z轴
     CABasicAnimation *momAnimation = [CABasicAnimation     animationWithKeyPath:@"transform.rotation.z"];
        momAnimation.fromValue = [NSNumber numberWithFloat:-0.1];//左幅度
        momAnimation.toValue = [NSNumber numberWithFloat:0.1];//右幅度
        momAnimation.duration = 1.5;
        momAnimation.repeatCount = CGFLOAT_MAX;//无限重复
        momAnimation.autoreverses = YES;//动画结束时执行逆动画
        momAnimation.delegate = self;
        [self.moveView.layer addAnimation:momAnimation forKey:@"centerLayer"];
        }

    3.翻转动画

    - (void)transitionAnimation
    {
        CGContextRef context=UIGraphicsGetCurrentContext();
        [UIView beginAnimations:nil context:context];
        [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];//可选
        [UIView setAnimationDuration:1.0];
        [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.moveView cache:YES];//UIViewAnimationTransitionCurlUp五种翻转效果可选
        [UIView setAnimationDelegate:self];
        [UIView commitAnimations];
    }
    

    4.循环动画

    [UIView animateWithDuration:timer animations:^{
            //执行
        } completion:^(BOOL finished) {
           //结束后再执行(就是不知无限循环有多大危害)
        }];
    
    展开全文
  • 6.添加View的动画效果 本章节主要来做明细页面点击后翻转动画效果,该效果可以进行多种改变,以达到想要的效果。 1.首先我们需要进行翻转的正反两个view,前面我们已经做好了,分别是PKOElementDetailImageView...

    6.添加View的动画效果

    本章节主要来做明细页面点击后翻转的动画效果,该效果可以进行多种改变,以达到想要的效果。

    1.首先我们需要进行翻转的正反两个view,前面我们已经做好了,分别是PKOElementDetailImageViewPKOElementDetailImageFlippedView,具体翻转动画在明细页面的控制其中进行,触发当然是PKOElementDetailImageView中的点击事件,前文已经提到。
    2.PKOElementDetailImageView中的点击事件调用PKOElementDetailViewController中的flipImageView()方法,该方法具体实现翻转功能,注释中写的很详细。
    代码如下。

    //翻转动画
        func flipImageView() {
            UIView.beginAnimations(nil, context:nil)
            //平滑动画效果
            UIView.setAnimationCurve(UIViewAnimationCurve.Linear)
            UIView.setAnimationDuration(1)
            
            var reflectionHeight: CGFloat
            var reflectedImage: UIImage?
            
            //点击正面
            if(self.frontViewIsVisible == true){
                UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromLeft, forView: self.subView!, cache: true)
                self.detailImage.removeFromSuperview()
                self.subView?.addSubview(self.detailImageFlipped)
            }
            //点击反面
            else{
                UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromRight, forView:self.subView!, cache:true)
                self.detailImageFlipped.removeFromSuperview()
                self.subView?.addSubview(self.detailImage)
            }
            //提交动画
            UIView.commitAnimations()
            //设置是否正面显示标识
            self.frontViewIsVisible = !self.frontViewIsVisible
        }

    7.添加View的阴影

    本章节主要来做明细页面图片的阴影效果,该效果可以进行高度设置,并且完全反射,包含所绘制的文字。

    1.通过控制器PKOElementDetailViewController绘制明细图的同时,绘制图片的阴影,该阴影应该基于阴影的主图,所以放在PKOElementDetailImageView中处理。
    reflectedImageWithHeight(height: UInt) ->UIImage该方法将返回对应阴影image。
    具体做法请看注释,思路是:复制一个位图并裁剪成需要大小-翻转并绛色-填充渐变色
    代码如下。

    //通过指定高度生成倒影图,方法完全照搬官方sample,
        func reflectedImageWithHeight(height: UInt) ->UIImage{
            //这里注意,swift不能直接在CG方法中用nil,需要声明一个变量
            var nilUnsafeMutablePointer: UnsafeMutablePointer<Void> = nil
            //rgb颜色容器,RGBA和CMYK的区别我会另开博文去说这个
            var colorSpace  = CGColorSpaceCreateDeviceRGB()
            var int32CGImageAlphaInfo = CGImageAlphaInfo.PremultipliedLast.toRaw()
            var bitmapInfo = CGBitmapInfo.fromRaw(int32CGImageAlphaInfo)
            
            //使用CG绘制位图上下文,以下是方法的用法,网上抓的,大家可以试一下具体用法。
            //参数data指向绘图操作被渲染的内存区域,这个内存区域大小应该为(bytesPerRow*height)个字节。如果对绘制操作被渲染的内存区域并无特别的要求,那么可以传递NULL给参数date。
            //参数width代表被渲染内存区域的宽度。
            //参数height代表被渲染内存区域的高度。
            //参数bitsPerComponent被渲染内存区域中组件在屏幕每个像素点上需要使用的bits位,举例来说,如果使用32-bit像素和RGB颜色格式,那么RGBA颜色格式中每个组件在屏幕每个像素点上需要使用的bits位就为32/4=8。
            //参数bytesPerRow代表被渲染内存区域中每行所使用的bytes位数。
            //参数colorspace用于被渲染内存区域的“位图上下文”。
            //参数bitmapInfo指定被渲染内存区域的“视图”是否包含一个alpha(透视)通道以及每个像素相应的位置,除此之外还可以指定组件式是浮点值还是整数值。
            var mainViewContentContext = CGBitmapContextCreate(nilUnsafeMutablePointer, UInt(self.bounds.size.width), height, UInt(8), UInt(0), colorSpace, bitmapInfo!)
            
            //注意,swift操作CG是不需要释放的,CG内部的GC已经处理了
            
            //调整位图位置,CGContextTranslateCTM为位移方法
            var translateVertical = CGFloat(self.bounds.size.height) - CGFloat(height)
            //这里相当于翻转
            CGContextTranslateCTM(mainViewContentContext, 0, -translateVertical)
            
            //将该位图渲染到layer层,layer层是view的根层,这里相当与copy一个self
            self.layer.renderInContext(mainViewContentContext)
            
            //根据位图上下文生成位图
            var mainViewContentBitmapContext = CGBitmapContextCreateImage(mainViewContentContext)
            
            //创建一个mask,确认刚才生成的位图那些是需要显示的,这里主要用它的渐变功能,image mask就像是用于表征色彩放在页面的哪一部分
            var gradientMaskImage = PKOElementDetailImageView.AEViewCreateGradientImage(UInt(1), pixelsHigh: UInt(height))
            
            //将位图需要显示的部分显示出来
            var reflectionImage = CGImageCreateWithMask(mainViewContentBitmapContext, gradientMaskImage)
            
            //通过image生成UIImage,并返回
            var theImage = UIImage(CGImage: reflectionImage)
            return theImage
        }
        
        class func AEViewCreateGradientImage ( pixelsWide: UInt, pixelsHigh: UInt) ->CGImageRef {
            var nilUnsafeMutablePointer: UnsafeMutablePointer<Void> = nil
            var colorSpace = CGColorSpaceCreateDeviceGray()
            var int32CGImageAlphaInfo = CGImageAlphaInfo.None.toRaw()
            var bitmapInfo = CGBitmapInfo.fromRaw(int32CGImageAlphaInfo)
            //使用CG绘制位图上下文,渐变色位图
            var gradientBitmapContext = CGBitmapContextCreate(nilUnsafeMutablePointer, pixelsWide, pixelsHigh,
                UInt(8), UInt(0), colorSpace, bitmapInfo!)
            
            //创建渐变对象,对于CG渐变我会在开博文详细解释
            var colors: [CGFloat] = [0.0, 1.0,1.0, 1.0]
            var nilUnsafePointer: UnsafePointer<CGFloat> = nil
            var grayScaleGradient = CGGradientCreateWithColorComponents(colorSpace, colors, nilUnsafePointer, UInt(2))
            
            //渐变的开始点和结束点
            var gradientStartPoint = CGPointZero
            var gradientEndPoint = CGPointMake(0, CGFloat(pixelsHigh))
            
            //填充渐变色
            CGContextDrawLinearGradient(gradientBitmapContext, grayScaleGradient, gradientStartPoint, gradientEndPoint, CGGradientDrawingOptions())
            
            //通过image生成UIImage,并返回
            var theCGImage = CGBitmapContextCreateImage(gradientBitmapContext)
            return theCGImage
        }

    2.在PKOElementDetailViewController中图像渲染时调用PKOElementDetailImageView中的reflectedImageWithHeight(height: UInt) ->UIImage返回image,将其添加在subview中。
    代码如下。

    //创建倒影图
            var reflectionRect = imageRect
            reflectionRect.size.height = CGFloat(CGRectGetHeight(reflectionRect)) * CGFloat(reflectionRadio)
            reflectionRect = CGRectOffset(reflectionRect, 0, CGRectGetHeight(imageRect))
            var reflectionView = UIImageView(frame: reflectionRect)
            self.reflectionImage = reflectionView
            var height = (self.detailImage?.bounds.height as CGFloat!) * CGFloat(reflectionRadio)
            self.reflectionImage.image = self.detailImage?.reflectedImageWithHeight(UInt(height))
            self.reflectionImage.alpha = 0.3
            //添加倒影
            self.subView?.addSubview(self.reflectionImage)

    3.在翻转的同时需要更新倒影,使倒影应用于反面,再次翻转时需要再次更新,保证阴影跟随主图的变幻而变化,在控制器的翻转方法flipImageView()中进行处理即可 。
    代码如下。

    //翻转动画
        func flipImageView() {
            UIView.beginAnimations(nil, context:nil)
            //平滑动画效果
            UIView.setAnimationCurve(UIViewAnimationCurve.Linear)
            UIView.setAnimationDuration(1)
            
            var reflectionHeight: CGFloat
            var reflectedImage: UIImage?
            
            //点击正面
            if(self.frontViewIsVisible == true){
                UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromLeft, forView: self.subView!, cache: true)
                self.detailImage?.removeFromSuperview()
                self.subView?.addSubview(self.detailImageFlipped)
                
                // 更新倒影
                reflectionHeight = (self.detailImageFlipped.bounds.height as CGFloat) * CGFloat(reflectionRadio)
                reflectedImage = self.detailImageFlipped.reflectedImageWithHeight(UInt(reflectionHeight))
                self.reflectionImage.image = reflectedImage
            }
            //点击反面
            else{
                UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromRight, forView:self.subView!, cache:true)
                self.detailImageFlipped.removeFromSuperview()
                self.subView?.addSubview(self.detailImage!)
                
                // 更新倒影
                reflectionHeight = (self.detailImage!.bounds.height as CGFloat) * CGFloat(reflectionRadio)
                reflectedImage = self.detailImage?.reflectedImageWithHeight(UInt(reflectionHeight))
                self.reflectionImage.image = reflectedImage
            }
            //提交动画
            UIView.commitAnimations()
            //设置是否正面显示标识
            self.frontViewIsVisible = !self.frontViewIsVisible
        }

    至此全部改造完成,完整源代码请去第一篇下载

    点击进入ooppookid的博客

    展开全文
  • Swift 旋转动画 import UIKitclass VisitorView: UIView { // MARK:- 提供快速通过xib创建的类方法 class func visitorView() -> VisitorView { return NSBundle.mainBundle().loadNibNamed("VisitorView", owner: ...

    Swift 旋转动画

    import UIKit
    
    class VisitorView: UIView {
    // MARK:- 提供快速通过xib创建的类方法
    class func visitorView() -> VisitorView {
        return NSBundle.mainBundle().loadNibNamed("VisitorView", owner: nil, options: nil).first as! VisitorView
    }
    
    // MARK:- 控件的属性 第一次设置的动画的 ImageView
    @IBOutlet weak var rotationView: UIImageView!
    @IBOutlet weak var iconView: UIImageView!
    @IBOutlet weak var tipLabel: UILabel!
    @IBOutlet weak var registerBtn: UIButton!
    @IBOutlet weak var loginBtn: UIButton!
    
    // MARK:- 自定义函数
    func setupVisitorViewInfo(iconName : String, title : String) {
        iconView.image = UIImage(named: iconName)
        tipLabel.text = title
        rotationView.hidden = true
    }
    
    func addRotationAnim() {
        // 1.创建动画
        let rotationAnim = CABasicAnimation(keyPath: "transform.rotation.z")
    
        // 2.设置动画的属性
        rotationAnim.fromValue = 0
        rotationAnim.toValue = M_PI * 2
        rotationAnim.repeatCount = MAXFLOAT
        rotationAnim.duration = 5
        // 这个属性很重要 如果不设置当页面运行到后台再次进入该页面的时候 动画会停止
        rotationAnim.removedOnCompletion = false
    
        // 3.将动画添加到layer中
        rotationView.layer.addAnimation(rotationAnim, forKey: nil)
    }
     }
    
    展开全文
  • Swift3.0为视图添加旋转动画_CABasicAnimation
    Swift2.3:
    //创建旋转动画
    let anim = CABasicAnimation(keyPath: "transform.rotation")
    //旋转角度
    anim.toValue = 1 * M_PI
    //旋转指定角度需要的时间
    anim.duration = 1
    //旋转重复次数
    anim.repeatCount = MAXFLOAT
    //动画执行完后不移除
    anim.removedOnCompletion = true
    //将动画添加到视图的laye上
    view.layer.addAnimation(anim, forKey: nil)
    //取消动画
    view.layer.removeAllAnimations()
    //这个是旋转方向的动画        
    UIView.animateWithDuration(0.2) { () -> Void in
        //指定旋转角度是180°
        view.transform = CGAffineTransformRotate(view.transform, CGFloat(M_PI))
    }
    
    Swift3.0:
    let anim = CABasicAnimation(keyPath: "transform.rotation")
    anim.toValue = 1 * M_PI
    anim.duration = 1
    anim.repeatCount = MAXFLOAT
    anim.isRemovedOnCompletion = true
    view1.layer.add(anim, forKey: nil)
    view1.layer.removeAllAnimations()
    UIView.animate(withDuration: 0.2) {
        view1.transform = view1.transform.rotated(by: CGFloat(M_PI))
    }
    
    展开全文
  • swift:旋转动画方法

    2016-08-03 17:47:45
    private func startAniamtion()  {  //1.创建动画  let anim = CABasicAnimation(keyPath: "transform.rotation")  //2.设置动画属性  anim.toValue = 2 * M_PI  
  • Swift--图片旋转动画

    2019-09-25 01:18:41
    // 创建动画 let anim = CABasicAnimation(keyPath: "transform.rotation") // 设置动画属性 anim.toValue = 2 * M_PI anim.repeatCount = MAXFLOAT anim.durati...
  • Swift 按钮点击图片旋转动画

    千次阅读 2018-11-24 17:45:36
    需求:按钮图片为向下... 动图图片展示 @objc func buttonAction(sender: UIButton) { //创建动画 let anim = CABasicAnimation() //一个重要的设置:就是keyPath //旋转动画一定要设置为transform.rotation...
  • Swift.轮转动画+Pop框架

    2018-11-14 09:55:39
    项目改自Swift.轮转动画,100行代码搞定,页面布局没有变化,只是改变了动画效果,以及动画实现方式.所以有关布局的问题可以参考那篇文章. 实现效果: 长按中心View,使周围子View旋转,并将最下方的View放大,获取其image在...
  • 在 iOS 中,实现动画有两种方法。一个是统一的 animate,另一个是组合出现的 beginAnimations 和 commitAnimations。这三个方法都是类方法。 一,使用 animate 来实现动画 (1)此方法共有5个...
  • 静止时:子view对称排列,允许动态添加,0~24个都能较好的显示. 旋转时:中心view不动,子view随手势旋转,最下方子view变大突出. 实现思路: 所有的控件全部加到一个大的背景view上,本质上旋转的是这个背景view,在旋转背景...
  • swift 之SnapKit 动画

    2019-07-04 21:17:43
    一直以为把约束直接添加动画里面就可以了。但是并没那么简单。-.-其实还是挺简 class ViewController: UIViewController { @IBOutlet weak var usernameOutlet: UITextField! @IBOutlet weak var ...
  • Swift3 1动画(一)

    2019-02-26 21:29:55
    所以我特地整理了下去年学习swift动画的demo,现在已经把demo更新到最新swift3.0,在此做个记录,也给大家分享下。 #####外观属性: backgroundColor 背景颜色 alpha 透明度 ###一、一般动画 ######1、普通平移 ...
  • iOS 自定义页面的切换动画与交互动画 By Swift

    万次阅读 多人点赞 2014-11-24 12:28:47
    在iOS7之前,开发者为了寻求自定义Navigation Controller的Push/Pop动画,只能受限于子类化一个UINavigationController,或是用自定义的动画去覆盖它。但是随着iOS7的到来,Apple针对开发者推出了新的工具,以更灵活...
  • 页面动画的跳转.zip 相关代码 import UIKit class ViewController: UIViewController,UINavigationControllerDelegate,UIViewControllerAnimatedTransitioning,UIViewControllerInteractiveTrans...
  • 添加View的动画效果 本章节主要来做明细页面点击后翻转动画效果,该效果可以进行多种改变,以达到想要的效果。 1.首先我们需要进行翻转的正反两个view,前面我们已经做好了,分别是PKOElementDetailImageView和...
  • import UIKitclass ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let myView = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))// ...
  • 今天在网到有人实现了一个旋转菜单,我用CAKeyFrameAnimation(position)和CABasicAnimation(transform.scale)也做了一个,和大家分享下, 菜单支持奇数和偶数个,点击会旋转并缩放,图如下: 实现代码:都在一...
1 2 3 4 5 ... 20
收藏数 1,862
精华内容 744
关键字:

swift 添加翻转动画