iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >Swift使用transform 实现重复平移动画效果
  • 529
分享到

Swift使用transform 实现重复平移动画效果

2024-04-02 19:04:59 529人浏览 安东尼
摘要

摘要 要实现一组重复的动画,本质上就是找到动画开始点、结束点。在动画结束的时候,触发开始点,持续这样的动作。 这里面要梳理的逻辑就是1.触发开始点和2.监听动画结束点。这两个逻辑是实

摘要

要实现一组重复的动画,本质上就是找到动画开始点、结束点。在动画结束的时候,触发开始点,持续这样的动作。

这里面要梳理的逻辑就是1.触发开始点和2.监听动画结束点。这两个逻辑是实现重复动画的基础。

应用场景

将 imageView 等 UI 控件,设置成平移的动画,并且一直动画中。

transfORM 可以实现控件的平移,但是无法连续动画。

api 及语言

核心逻辑/代码

transform 可以将控件平移,为了达到连续动画,可使用递归方式实现。

动画实现

设置动画并开始
使用 UIView.animate(withDuration: , animations: , completion: ) 函数设置动画。

这个方法有开始动画事件,也有监听动画完成事件(completion 方法)

实现连续动画

在completion 中递归调用开始动画函数,达到连续动画的效果。

停止动画

设置一个全局的标示,来记录动画的状态,也可以通过更改这个状态来判断是否需要开始动画,比如设置 UI 控件的isHidden属性,实现停止动画

细节

在开始动画的时候,就进行判断,如果isHidden为 true,则直接停止动画。可以精准控制动画的次数。

在开始动画函数中设置闭包,可以在闭包中设置停止动画的代码等。

示例代码

重复 3 次平移动画,在每次动画开始前都判断self.guideImageView.isHidden, 在动画过程中,如果要停止动画,只需设置 self.guideImageView.isHidden = false, 就停止动画。


func guideanimations() {
        // 动画执行 3 次
        var count = 3
        // 开始动画
        startAnimation {[weak self] in
            guard let self = self else { return }
            count -= 1
            if count == 0 { self.guideImageView.isHidden = true }
        }
    }
    
    // 设置并开始动画
    func startAnimation(_ complete: @escaping ()->()) {
        if self.guideImageView.isHidden { return }
        
        UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut) {
            self.guideImageView.transform = self.guideImageView.transform.translatedBy(x: -50, y: 0)

        } completion: { [weak self](finish) in
            // 动画结束时,将控件复原
            guard let self = self else { return }
            self.guideImageView.transform = self.guideImageView.transform.translatedBy(x: 50, y: 0)
            // 先返回闭包,然后再执行动画函数
            complete()
            self.startAnimation(complete)
        }
    }
    
    // 停止动画
    func stopAnimation() {
        if self.guideImageView.isHidden == false {
            self.guideImageView.isHidden = true
        }
    }

到此这篇关于Swift使用transform 实现重复平移动画效果的文章就介绍到这了,更多相关transform 重复平移动画内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Swift使用transform 实现重复平移动画效果

本文链接: https://www.lsjlt.com/news/130810.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Swift使用transform 实现重复平移动画效果
    摘要 要实现一组重复的动画,本质上就是找到动画开始点、结束点。在动画结束的时候,触发开始点,持续这样的动作。 这里面要梳理的逻辑就是1.触发开始点和2.监听动画结束点。这两个逻辑是实...
    99+
    2024-04-02
  • Swift如何使用transform实现重复平移动画效果
    这篇文章主要讲解了“Swift如何使用transform实现重复平移动画效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Swift如何使用transform实现重复平移动画效果”吧!摘要要...
    99+
    2023-06-20
  • CSS3中怎么实现平移动画效果
    这期内容当中小编将会给大家带来有关CSS3中怎么实现平移动画效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。一、平移动画有关的CSS3属性以及相关的属性描述  1、tr...
    99+
    2024-04-02
  • CSS怎么实现动画移动效果
    这篇文章主要为大家展示了“CSS怎么实现动画移动效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS怎么实现动画移动效果”这篇文章吧。思路首先我们新建一个正方形,用<svg>&l...
    99+
    2023-06-27
  • 使用Html5怎么实现一个移动端弹幕动画效果
    这期内容当中小编将会给大家带来有关使用Html5怎么实现一个移动端弹幕动画效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。思路把单个内容编辑好,计算自身宽度,确定初始位置移动的距离是屏幕宽度js动态的添...
    99+
    2023-06-09
  • 如何使用纯CSS3的transform实现心动效果
    这篇文章主要介绍如何使用纯CSS3的transform实现心动效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!心动送一个爱心表示我对你心动,使用纯 CSS3 的transform实现:css 部分html,body...
    99+
    2023-06-27
  • CSS3怎么实现超慢速移动动画效果
    这篇文章主要讲解了“CSS3怎么实现超慢速移动动画效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3怎么实现超慢速移动动画效果”吧! ...
    99+
    2024-04-02
  • 如何使用CSS3实现动画效果
    这篇文章主要为大家展示了“如何使用CSS3实现动画效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用CSS3实现动画效果”这篇文章吧。浏览器支持Inte...
    99+
    2024-04-02
  • 怎么使用vue实现动画效果
    这篇文章主要介绍了怎么使用vue实现动画效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用vue实现动画效果文章都会有所收获,下面我们一起来看看吧。Vue封装的过度与动画1.作用在插入,更新,移除DOM...
    99+
    2023-07-05
  • 怎么使用js实现动画效果
    这篇文章主要介绍“怎么使用js实现动画效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么使用js实现动画效果”文章能帮助大家解决问题。1.动画原理      &nb...
    99+
    2023-07-05
  • vue使用动画实现滚动表格效果
    本文实例为大家分享了vue使用动画实现滚动表格效果的具体代码,供大家参考,具体内容如下 需求 在一些大屏项目中,需要使用到表格行数据滚动。本文介绍在vue项目中使用动画实现滚动表格。...
    99+
    2024-04-02
  • 用JavaScript实现动画效果(转)
    大家在使用Dreamweaver中的时间线功能或以做出很有趣的动画效果,Dreamweaver会自动为用户生成特定的程序代码,大家有没有想过动画的实现原理呢?其实原理是很简单的,主要是使用了一个计时器函数,下面我为大家  演示一个简单的动画...
    99+
    2023-06-03
  • 用JavaScript实现动画效果 (转)
    用JavaScript实现动画效果 (转)[@more@]主页: .NET">http://www.maxss.netEMail: maxss.net@163.com  大家在使用Dreamweaver中的时间线功能或以做出很有趣的动画效果...
    99+
    2023-06-03
  • 使用Vue transition 实现点赞动画效果
    要实现点赞动画效果,你可以使用Vue的过渡(transition)组件。下面是一个简单的示例代码:```html<templa...
    99+
    2023-09-21
    Vue
  • 使用opencvs怎么实现一个图像平移效果
    今天就跟大家聊聊有关使用opencvs怎么实现一个图像平移效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。图像平移:按照指定方向和距离,移动到相应位置格式:cv.warpAffin...
    99+
    2023-06-14
  • vue中使用animate.css实现炫酷动画效果
    目录1.安装(在vscode终端中,使用npm安装)2.引入3.代码实现animate.css 是一个来自国外的 CSS3 动画库,它提供了抖动(shake)、闪烁(flash)、弹...
    99+
    2024-04-02
  • Vue中使用Openlayer实现加载动画效果
    注意:实现动画时不能有scoped!!!!  通过gif <template> <div class="test"> <di...
    99+
    2024-04-02
  • 怎么用纯CSS实现一只移动的小白兔动画效果
    这篇文章主要介绍怎么用纯CSS实现一只移动的小白兔动画效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!   代码解读   定义dom,页面中包含2个元素,分别代表兔子和云朵: ...
    99+
    2024-04-02
  • vue怎么使用动画实现滚动表格效果
    这篇文章主要介绍“vue怎么使用动画实现滚动表格效果”,在日常操作中,相信很多人在vue怎么使用动画实现滚动表格效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue怎么使用动画实现滚动表格效果”的疑惑有所...
    99+
    2023-06-29
  • CSS怎么实现多屏复杂动画效果
    本篇内容介绍了“CSS怎么实现多屏复杂动画效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!技巧一、使用a...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作