首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在alpha上平滑地暂停重复的UIView块动画,然后再播放另一个动画

在iOS开发中,UIView 的动画块是一种常用的方式来创建动画效果。如果你想要在 alpha 属性上平滑地暂停一个重复的动画,然后再播放另一个动画,你可以使用 UIView 的动画方法和 CADisplayLink 来实现。

基础概念

  • UIView 动画块UIView 提供了类方法来创建动画块,例如 animateWithDuration:animations:
  • CADisplayLink:这是一个与显示器刷新率同步的定时器,可以用来创建更平滑的动画效果。
  • 动画暂停和恢复:可以通过改变动画的时间偏移量来暂停动画,并通过设置新的时间偏移量来恢复动画。

相关优势

  • 平滑过渡:使用 CADisplayLink 可以确保动画与屏幕刷新同步,从而实现更平滑的动画效果。
  • 精确控制:可以精确地控制动画的开始、暂停和恢复。
  • 灵活性:可以在动画运行时动态地改变动画参数。

类型

  • 重复动画:通过设置动画的 repeatCount 属性为 INFINITY 来创建无限重复的动画。
  • 暂停和恢复动画:通过调整动画的 beginTime 属性来实现动画的暂停和恢复。

应用场景

  • 用户界面元素的状态变化:如按钮的高亮效果、视图的淡入淡出等。
  • 游戏中的角色动作:需要精确控制动画的播放和暂停。
  • 交互式动画:用户操作触发的动画效果。

示例代码

以下是一个示例代码,展示了如何在 alpha 属性上平滑地暂停一个重复的动画,然后再播放另一个动画:

代码语言:txt
复制
import UIKit

class AnimatedView: UIView {
    
    private var displayLink: CADisplayLink?
    private var startTime: CFTimeInterval = 0
    private var pausedTimeOffset: CFTimeInterval = 0
    private var animationDuration: TimeInterval = 2.0
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupAnimation()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupAnimation()
    }
    
    private func setupAnimation() {
        displayLink = CADisplayLink(target: self, selector: #selector(updateAnimation))
        displayLink?.add(to: .current, forMode: .common)
    }
    
    @objc private func updateAnimation(displayLink: CADisplayLink) {
        if startTime == 0 {
            startTime = displayLink.timestamp - pausedTimeOffset
        }
        
        let elapsed = displayLink.timestamp - startTime
        let progress = CGFloat(fmod(elapsed, animationDuration) / animationDuration)
        
        alpha = 0.5 + 0.5 * sin(progress * .pi * 2)
    }
    
    func pauseAnimation() {
        if !displayLink?.isPaused ?? true {
            displayLink?.pause()
            pausedTimeOffset = CACurrentMediaTime() - startTime
        }
    }
    
    func resumeAnimation() {
        if displayLink?.isPaused ?? false {
            startTime = CACurrentMediaTime() - pausedTimeOffset
            displayLink?.resume()
        }
    }
    
    func startNewAnimation() {
        pauseAnimation()
        // 设置新的动画参数
        animationDuration = 3.0
        startTime = 0
        displayLink?.resume()
    }
}

遇到的问题及解决方法

如果你遇到了动画不平滑或者无法正确暂停和恢复的问题,可能的原因包括:

  • 时间计算不准确:确保使用 CACurrentMediaTime() 来获取当前时间,这是一个与显示器刷新率同步的时间。
  • 动画参数设置错误:检查 animationDurationstartTime 的设置是否正确。
  • CADisplayLink 使用不当:确保 CADisplayLink 正确地添加到了当前的运行循环中,并且正确处理了暂停和恢复的状态。

解决方法:

  • 仔细检查时间相关的计算,确保它们是基于 CACurrentMediaTime() 的。
  • 在修改动画参数后,重置 startTime 以确保动画从正确的点开始。
  • 确保 CADisplayLink 的状态与动画的播放状态一致。

通过上述方法,你应该能够在 alpha 属性上实现平滑的重复动画的暂停和另一个动画的播放。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

iOS Core Animation:Advanced Techniques

当不在一个动画块的实现中,UIView对所有图层行为返回nil,但是在动画block范围之内,它就返回了一个非空值,我们可以用一个demo做个简单的实验: //test layer action...在这里,我们给UIView类型的指针添加的动画,所以可以简单地判断动画到底属于哪个视图,然后在委托方法中用这个信息正确地更新钟的指针(见下面的代码)。...过渡并不像属性动画那样平滑地在两个值之间做动画,而是影响到整个图层的变化。过渡动画首先展示之前的图层外观,然后通过一个交换过渡到新的外观。...对图层树的动画 CATransition并不作用于指定的图层属性,这就是说你可以在即使不能准确得知改变了什么的情况下对图层做动画,例如,在不知道UITableView哪一行被添加或者删除的情况下,直接就可以平滑地刷新它...在这个例子中,我们自始至终想使用同一个缓冲函数,但我们同样需要一个函数的数组来告诉动画不停地重复每个步骤,而不是在整个动画序列只做一次缓冲,我们简单地使用包含多个相同函数拷贝的数组就可以了。

1.9K30

IOS开发系列——UIView专题之二:动画篇【整理,部分原创】

2UIView动画 2.1概述 UIView视图的动画功能,可以使在更新或切换视图时有放缓节奏、产生流畅的动画效果,进而改善用户体验。...UIView可以产生动画效果的变化包括: •位置变化:在屏幕上移动视图。 •大小变化:改变视图框架(frame)和边界。 •拉伸变化:改变视图内容的延展区域。...讨论 这个值改变是因为设置了一些需要在动画块中产生动画的属性。动画块可以被嵌套。如果在没有在动画块中调用那么setAnimation类方法将什么都不做。...setAnimationRepeatAutoreverses:设置动画块中的动画效果是否自动重复播放。...讨论 自动重复是当动画向前播放结束後再重头开始播放。使用setAnimationRepeatCount:类方法来指定动画自动重播的时间。如果重复数为0或者在动画块外那将没有任何效果。

1.5K10
  • iOS-视频播放器的简单封装

    视频播放器布局 首先使用xib创建CLAVPlayerView继承UIView用来承载播放器,这样我们在外部使用的时候,直接在控制器View或者Cell上添加CLAVPlayerView即可,至于播放器播放或者暂停等操作交给...,并且我们为了能让工具栏的显示有动画效果,这里通过设置toolView的alpha来显示或隐藏工具栏,并通过isShowToolView来记录toolView的显示或隐藏。...,播放暂停,则此时工具栏不会消失,重新开始播放视频,工具栏在5秒内消失。...,同步更新播放时间和Slider,当播放途中点击工具栏暂停按钮暂停播放,需要将视频暂停,并移除定时器,重新开始播放时在添加定时器,并开始播放 /** toolView上暂停按钮的点击事件 */ -...按下时移除定时器,拖动时根据拖动的值即时的计算当前播放时间并显示在label上,松开时计算当前播放时间,并跳转到当前播放时间进行播放。

    1.9K110

    (译)快速指南:用UIViewPropertyAnimator做动画

    至少有3点需要注意: 这个动画是通过闭包来定义的,与UIView 的动画类很相似“UIView.animation(duration:…)”。 返回一个对象,即动画创建者。...当动画开始或者暂停时,动画的状态就是活跃状态;当动画已被初始化但是还未开始或者动画已完成,它就是非活跃状态。需要注意的是 在活跃状态和停止态之间有一点点不同。...例如,除了在初始化的时候指定的block外,你还可以指定多个动画block。...你还可以向已在运行的动画添加动画块,该动画块将立即使用剩余时间作为新动画的持续时间来执行。...我已经迫不及待地想要用这个新的动画系统来实现一些很酷的UI 效果了。我会在我的Twitter 上分享我的经验!

    1.2K30

    iOS动画开发之一——UIViewAnimation动画的使用

    iOS开发中,常用的动画处理有UIView动画编程和核心动画编程,其中UIView动画使用简便,开发中应用十分广泛。这篇博客,主要讨论UIView的动画使用。...;        这个是参数最少的一个方法,我们可以通过设置一个时间和block块来完成动画,时间参数是动画执行的时长,block块中为要执行的动画动作,具体可以执行那些动作,我们会在后面说。...用法和第一个函数相似,设置一个执行时间和一个执行动作,第二个block块中可以添加一个动画执行结束后的动作,作为补充,例如下面代码的效果,在1S内将view渐变为透明,动画结束后,view在瞬间变回不透明...四、动画执行选项设置    在UIView执行动画的相关函数中,有UIViewAnimationOptions这个参数可以对动画的执行效果进行设置,这个枚举非常多,可分为三部分,如下: enum {    ...      = 1 在动画执行时用户与其进行交互    UIViewAnimationOptionBeginFromCurrentState     = 1 在动画执行时执行新的动画

    1.3K30

    View编程指南(四)

    在UIKit中,动画是使用UIView对象执行的。 view支持一组涵盖许多常见任务的基本动画。...该方法可以让您自定义以下动画参数: 开始动画之前使用的延迟 在动画中使用的时间曲线的类型 动画应该重复的次数 当动画到达最后时,动画是否会自动反转 触摸事件是否在动画进行过程中传递到view 动画是否应该中断任何正在进行的动画...如果您的应用程序在iOS 3.2及更早版本中运行,则必须使用UIView的beginAnimations:context:和commitAnimations类方法来定义您的动画块。...completion:nil]; } completion:nil]; 在这种情况下,两个view正在被淡化为完全透明,但是另一个view对象的透明度在最终隐藏之前来回地多次改变...在传递给此方法的动画块中,通常动画的唯一更改是与显示,隐藏,添加或删除子view相关的更改。将动画限制为该集合允许view创建view之前和之后版本的快照图像,并且在两个图像之间创建动画,这更高效。

    65910

    iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题

    iOS的各种动画相漂亮,相信这是吸引很多人买iPhone的原因之一。不仅如此,这还是吸引我做iOS开发的一大原因,因为在iOS上给界面实现一些像样的动画实在是太轻松了!...block-base 动画的用法非常简单,先设置初始状态,再在animationWithDuration 或其他动画方法的 animations 里设置结束的状态,其他的全部不用管。...上文代码中,首先让 mView 的透明度从0动画到1,然后在 completion 的 closure 中再次设置一个动画,让 mView 的透明度回到0。...delay: 0, options: UIViewKeyframeAnimationOptions.Repeat, // 设置重复播放...在实现上面的效果的时候遇到了一个问题:iOS这些动画默认的变化速度是开始结束慢,中间快,于是这种循环动画的效果就不均匀。

    1.7K20

    Core Animation总结

    CALayer CALayer跟UIView概念上很相似,同样都是被层级管理树管理的一些矩形块,同样可以包含内容,管理子图层,可以做动画和变换。...很重要的原因是要将职责分离,这样可以避免很多重复的代码,由于iOS平台和MacOS平台上用户的交互方式有着本质的不同,在iOS系统中我们使用的是UIKit和UIView,而在MacOS系统中我们使用的是...2,动画将会在1.5秒结束,因为它以两倍速在执行) timeOffset 结合一个暂停动画(speed=0)一起使用来控制动画的“当前时间”。...暂停的动画将会在第一帧卡住,然后通过改变timeOffset来随意控制动画进程 repeatCount 重复的次数。不停重复设置为 HUGE_VALF repeatDuration 设置动画的时间。...将重复计数设置为自动回转动画的整数(例如1.0)会导致动画停止在其起始值上。添加额外的半步(例如重复计数为1.5)会导致动画停止在其结束值上。

    1.3K10

    iOS 开发从 UIView 动画说起

    界面动画 在这段动画之中发生的最为明显的事情就是两个文本框的位置变化,在动画开始之前,两个文本框的位置应该是在屏幕的左边,而下方的按钮现在是隐藏状态(设置alpha) ?...重复的动画 我们可以看到密码框在不断的循环进入屏幕,反方向退出屏幕这个操作,并且登录按钮也始终没有渐变出现。...上创建了四个橙色的UIView,分别传入这四个不同的参数,然后让这四个view在同一时间y轴上向上移动。...四种线性速度表示 在模拟器运行状态下,点击上面的菜单栏 DEBUG -> Slow Animation 或者快捷键 command + T,这会放慢我们app的动画运行速度(demo在6p的模拟器上运行...慢动作翻转 在我们切换图片的时候,原有的图片会基于视图中心位置进行x轴上的翻转,为了达到更逼真的效果,系统还为我们在切换中加上了阴影效果(ps: 再次要说明的是,transition的动画你应该只用在视图的切换当中

    1.7K70

    直播APP常用动画效果

    一个复杂的礼物动画,首先是美术给出gif实现草图和素材,技术进行动画剖析和图片压缩,在程序中加载图片和实现动画,其中要注意内存和CPU占用。 ?...天使 时间轴实现 为了让动画按照时间顺序一一执行,可以把动画按时间和对象分成多个方法,通过GCD在指定的时间调用。...1、视图变暗、变大 alpha值属性是透明度,把背景设置成淡黑色,然后调整alpha可以达到背景渐变的视图效果; UIView的transform是可以用仿射变换矩阵来控制平移、放大缩小等。...alpha的变化,但是UIView的block动画不好实现重复效果; UIView的alpha对应的是layer的opacity属性,设定好起始、过度和结束的状态,实现闪烁的效果。...天使动画的图片大小为900KB,运行时占内存15MB,播放完毕后,如果收到内存不足的警告会释放内存; 烟花动画的图片大小为400KB,运行时占用的内存为20MB,播放完毕后,会马上释放内存; 思考题?

    1.6K80

    【iOS】教你用ZFPlayer+KTVHTTPCache搭建缓存,预加载的播放器

    Demo演示的功能 提示:文末有相关的Demo下载链接 ZFPlayer的列表播放 使用KTVHTTPCache实现缓存(播放过的视频无需再下载) 使用KTVHTTPCache实现预加载(可以实现秒播)...自定义转场动画(实现无缝衔接的播放效果) 瀑布流页面(双排列表展示,以及转场动画) gif演示: ?...一、缓存+预加载功能 1、播放器mgr核心代码 mgr实现ZFPlayerMediaPlayback协议,然后在初始化时,开启本地服务器 + (void)initialize { [KTVHTTPCache...这里要注意异步线程的操作,要加锁处理 /// 根据传入的模型,预加载上几个,下几个的视频 - (void)preload: (id)resource { if (self.playableArray.count...这里我直接拿ZFPlayerDemo中的一个列表播放,一个抖音列表播放的例子进行演示,不熟悉转场动画的,建议自行先看看唐巧的https://blog.devtang.com/2016/03/13/iOS-transition-guide

    7.9K40

    从零开始学Android自定义View之动画系列——属性动画(1)

    逐帧动画的工作原理很简单,其实就是将一个完整的动画拆分成一张张单独的图片,然后再将它们连贯起来进行播放,类似于动画片的工作原理。...补间动画是只能够作用在View上的。...新引入的属性动画机制已经不再是针对于View来设计的了,也不限定于只能实现移动、缩放、旋转和淡入淡出这几种动画操作,它实际上是一种不断地对值进行操作的机制,并将值赋值到指定对象的指定属性上,可以是任意对象的任意属性...它的内部使用一种时间循环的机制来计算值与值之间的动画过渡,我们只需要将初始值和结束值提供给ValueAnimator,并且告诉它动画所需运行的时长,那么ValueAnimator就会自动帮我们完成从初始值平滑地过渡到结束值这样的效果...,在动画执行的过程中会不断地进行回调,我们只需要在回调方法当中将当前的值取出并打印出来,就可以知道动画有没有真正运行了。

    1.5K30

    iOS动画-CALayer隐式动画原理与特性

    Core Animation是基于这样的一个假设:屏幕上的任何东西都可以(或者可能)做动画,它并不需要手动打开,反而是需要我们明确的关闭,否则动画会一直存在。...测试隐式动画.gif 经过测试,我们会发现每次设置的颜色并不是立刻在屏幕上跳变出来,相反,它是从先前的值平滑过渡到新的值,这一切都是默认行为,你不需要做额外的操作,这就是隐式动画。...当不在一个动画块中修改动画属性时,UIView对所有图层行为都返回了nil,但是在动画Block范围就返回了非空值,下面通过一段代码来验证: @interface TestLayerAnimationVC...]; } //打印: OutSide: InSide: 由此得出结论:当属性在动画块之外发生变化,UIView直接通过返回...但是如果在动画块范围内,UIView则会根据动画具体类型返回响应的属性, 三、关闭和开启隐式动画 当然,返回nil并不是禁用隐式动画的唯一方法,CATransaction也为我们提供了具体的方法,可以用来对所有属性打开或者关闭隐式动画

    4.7K51

    Android属性动画完全解析(上),初识属性动画的基本用法

    逐帧动画的工作原理很简单,其实就是将一个完整的动画拆分成一张张单独的图片,然后再将它们连贯起来进行播放,类似于动画片的工作原理。...注意上面我在介绍补间动画的时候都有使用“对View进行操作”这样的描述,没错,补间动画是只能够作用在View上的。...它实际上是一种不断地对值进行操作的机制,并将值赋值到指定对象的指定属性上,可以是任意对象的任意属性。...它的内部使用一种时间循环的机制来计算值与值之间的动画过渡,我们只需要将初始值和结束值提供给ValueAnimator,并且告诉它动画所需运行的时长,那么ValueAnimator就会自动帮我们完成从初始值平滑地过渡到结束值这样的效果...,在动画执行的过程中会不断地进行回调,我们只需要在回调方法当中将当前的值取出并打印出来,就可以知道动画有没有真正运行了。

    1.6K70

    老司机带你走进Core Animation 之CAAnimation

    是这样的,CALayer是在QuartzCore框架下的,他是可以跨平台的,也就是在iOS和OS X上都可以,所以他当然不能让你传入UIKit下的对象了。...值得注意的是,结束代理中,有一个flag。他的意思是如果动画正常播放完成的话,flag为YES。如果没有播放完成或者被移除则返回NO。 removedOnCompletion,是否在播放完成后移除。...实际开发中建议开发者填写key且key不可重复,因为如果涉及到检测动画播放进度或者是移除动画之类的都要填写正确的key才可以。 好的,我们的动画已经初具规模了,我们一点一点完善。...老司机把重复和延时放在了添加动画之后,这个时候动画是什么样子的呢? 调整语句顺序 延时没有了,也不重复了,怎么回事???...嘿嘿嘿~ 好多动画在一起 呐,这是一个老司机封装的DWAnimation,他可以轻松、优雅地帮助你生成上面的动画。

    1.4K20

    iOS开发UI篇--iOS动画(Core Animation)总结

    这种自动化的图形加速技术让动画拥有更高的帧率并且显示效果更加平滑,不会加重CPU的负担而影响程序的运行速度。...: 动画的重复次数 autoreverses : 执行的动画按照原动画返回执行 timingFunction : 控制动画的显示节奏系统提供五种值选择,分别是: kCAMediaTimingFunctionLinear...第一种:UIView 代码块调用 _demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50); [UIView animateWithDuration...但在实质上,图层的属性值还是动画执行前的初始值,并没有真正被改变。...从底部进入 startProgress:动画起点(在整体动画的百分比) endProgress:动画终点(在整体动画的百分比) 效果演示: 4.5:综合案例 4.5.1 : 仿Path菜单效果 效果演示

    1.7K00

    自定义一个浮层弹窗视图

    动画的相关接口,它能够实现我们日常开发中80%以上的动画效果,可以处理frame、alpha、transform等,但是UIView的内置动画是不能自定义中间状态的,也就是说,不能实现关键帧动画。...这些UIView内置动画,实际上都是对CoreAnimation动画的封装。...展示浮层上的自定义提示视图的时候,我使用了UIView的动画,可以在这里实现浮层上的自定义提示视图展示时候的动画。 给浮层的背景视图添加一个点击手势,以在点击的时候移除该浮层。...写在最后 UIKit框架中各组件自带的各种动画效果,实际上都是对CoreAnimation这个框架中相关接口的封装。...)以及动画的暂停和恢复 其实,除了上面提到的相关动画,还有一个动画相关的类是有必要跟大家提一下的,那就是CAEmitterLayer(粒子发射器)。

    1.4K30
    领券