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

摘要

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

这里面要梳理的逻辑就是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 重复平移动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Swift4.1转场动画实现侧滑抽屉效果

    Swift4.1转场动画实现侧滑抽屉效果

    实现使用了Modal转场动画,原因是项目多由导航控制器和标签控制器作为基类,为了不影响导航控制器的代理,转场动画使用模态交互. 代码使用SnapKit进行布局,能够适应屏幕旋转.手势速率大于300或进度超过30%的时候直接完成动画,否则动画回滚取消,具体数值可以修改对应的常量.抽屉出现的时候,主控制有遮罩,对应关键字是mask. 实现文件只有两个 DrawerControl:控制抽屉出现,一行代码即可调用 Animator:负责动画实现,包括了交互式的代理事件和非交互式的代理事件 // // D

  • Swift自定义iOS中的TabBarController并为其添加动画

    Swift自定义iOS中的TabBarController并为其添加动画

    自定义TabBarController 有时候默认的TabBarController不能满足我们的开发需求,比如你想用彩色的图标,系统却只调用图标的轮廓,所以我们需要自己定义一下TabBar. 方法一:修改TabBarController中的TabBar 新建 CustomTabBarController 类继承自 UITabBarController,并在Storyboard中设置: 首先自定义 tabBar 的背景,在 viewDidLoad() 方法中添加: 复制代码 代码如下: // 用

  • swift3.0实现图片放大缩小动画效果

    swift3.0实现图片放大缩小动画效果

    一. 内容说明 跟我之前这篇类似,只不过那篇是OC版本,这篇是Swift版本 OC版本链接地址 目的:通过kingfisher请求5张图片,展示出来.然后利用图片放大缩小管理类展示图片,多张图片可以滑动浏览 效果图如下,想看动态的效果图,请看上面链接中的OC版本效果图,跟这篇是一样的. 本demo,只加载本地图片的demo下载链接 ,需要加载网络图片的,需要下载Kingfisher 二.源码展示 0. 图片测试demo源码 import Foundation import UIKit class

  • 利用swift实现卡片横向滑动动画效果的方法示例

    利用swift实现卡片横向滑动动画效果的方法示例

    本文主要给大家介绍了关于利用swift实现卡片横向滑动动画效果的相关资料,分享出来供大家参考学习,下面来一起看看详细的介绍吧. 根据惯例,首先上效果图: 那天去面试,面试官突然拿出手机点开了一个app,自个在那点了一会,然后问我 这个效果怎么实现,当时一看可以滑动,肯定用scrollView 或者 collectionView实现,就大概的说了下.今天刚好闲下来,就敲一敲这个效果. 先来分析下这个效果: 卡片是横向滚动,并且每个卡片的位置都是保持在屏幕中间的,而且 左右相邻的卡片都露出来一点边

  • 利用Swift实现各类的CATransition动画详解

    前言 最近因为工作的需要,打算用swift重构现有项目,实现过程中发现用到了很多系统的动画实现,因为之前的都是用OC实现的,这里主要是把一些动画效果来通过swift实现一下. 这篇文章主要是实现一下CATransition动画的不同效果. 第一步 创建一个swift文件并声明相应的枚举类型 enum TransitionAnimType : Int { case fade = 0, //淡入淡出 push, //推挤 reveal, //揭开 moveIn, //覆盖 cube, //立方体 s

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

    摘要 要实现一组重复的动画,本质上就是找到动画开始点.结束点.在动画结束的时候,触发开始点,持续这样的动作. 这里面要梳理的逻辑就是1.触发开始点和2.监听动画结束点.这两个逻辑是实现重复动画的基础. 应用场景 将 imageView 等 UI 控件,设置成平移的动画,并且一直动画中. transform 可以实现控件的平移,但是无法连续动画. API 及语言 核心逻辑/代码 transform 可以将控件平移,为了达到连续动画,可使用递归方式实现. 动画实现 设置动画并开始 使用 UIView

  • iOS CAReplicatorLayer实现脉冲动画效果

    iOS CAReplicatorLayer实现脉冲动画效果

    iOS CAReplicatorLayer 实现脉冲动画效果,供大家参考,具体内容如下 效果图 脉冲数量.速度.半径.透明度.渐变颜色.方向等都可以设置.可以用于地图标注(Annotation).按钮长按动画效果(例如录音按钮)等. 代码已上传 GitHub:https://github.com/Silence-GitHub/CoreAnimationDemo 实现原理 实现方法参考:https://github.com/shu223/Pulsator 但是觉得那些代码不够简洁,所以自己写了一个

  • Swift洗牌动画效果的实现方法

    目标效果: 点击动画按钮之后每张牌各自旋转 散开到屏幕上半部分的任意位置之后回到初始位置 比较像LOL男刀的技能动画 : ) 1: 创建卡牌对象 for _ in 0...49 { let cardSet = UIImageView(image: UIImage(named: "cardBackLandscape")) self.view.addSubview(cardSet) cardSet.frame = self.landscapeCardBack.frame self.card

  • JS Canvas接口和动画效果大全

    概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript通过操作它的 API,在上面生成图像.它的底层是一个个像素,基本上<canvas>是一个可以用JavaScript操作的位图(bitmap). 它与 SVG 图像的区别在于,<canvas>是脚本调用各种方法生成图像,SVG 则是一个 XML 文件,通过各种子元素生成图像. 使用 Canvas API 之前,需要在网页里面新建一个<canvas>元素. <canvas id

  • vue实现页面加载动画效果

    我们经常看到数据未出现时,页面中会有一条提示消息, 页面正在加载中,如何实现该效果呢 ,请看下面代码 <template> <section class="page" v-if="option" :style="{background: option.background,color: option.color||'#fff'}" :class="{'page-before': option.index < cu

  • 实例解析如何在Android应用中实现弹幕动画效果

    实例解析如何在Android应用中实现弹幕动画效果

    在B站或者其他视频网站看视频时,常常会打开弹幕效果,边看节目边看大家的吐槽.弹幕看起来很有意思,今天我们就来实现一个简单的弹幕效果. 从直观上,弹幕效果就是在一个ViewGroup上增加一些View,然后让这些View移动起来.所以,整体的实现思路大概是这样的: 1.定义一个RelativeLayout,在里面动态添加TextView. 2.这些TextView的字体大小.颜色.移动速度.初始位置都是随机的. 3.将TextView添加到RelativeLayout的右边缘,每隔一段时间添加一个

  • Android Animation之TranslateAnimation（平移动画）

    TranslateAnimation(平移动画)的意思无非就是一张图片或其他从一个位置到达另外一个位置.直接代码分析,相关重要属性参数解释都在代码中. 1.首先编写main.xml文件. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_w

  • Android基础知识之tween动画效果

    Android基础知识之tween动画效果

    Android中一共提供了两种动画,其一便是tween动画,tween动画通过对view的内容进行一系列的图像变换(包括平移,缩放,旋转,改变透明度)来实现动画效果,动画效果的定义可以使用xml,也可以使用编码来实现. 下面我们逐一查看tween能够实现的动画效果. 先看看工程的整体结构吧: 我们要实现的效果图如图 点击按钮则执行相应的动画操作. 布局文件activity_main.xml <LinearLayout xmlns:android="http://schemas.androi

  • Core Animation一些Demo总结 （动态切换图片、大转盘、图片折叠、进度条等动画效果）

    Core Animation一些Demo总结 （动态切换图片、大转盘、图片折叠、进度条等动画效果）

    前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果图: 1.切换图片: 2.彩票转盘 3.图片折叠 4.进度条旋转 5.粒子效果 一.切换图片 看起来很复杂的动画,通过少量的计算和编码就可以简单的实现.要做到这一步,必须是需要研究iOS开发中的Core Animation和Core Graphics框架的.日常工作中,对于很多东西不求甚解,只是拿过

随机推荐