柯尔特伯爵 發表於 2021-7-21 09:13:45

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

<h2>摘要</h2>
<p>要实现一组重复的动画,本质上就是找到动画开始点、结束点。在动画结束的时候,触发开始点,持续这样的动作。</p>
<p>这里面要梳理的逻辑就是1.触发开始点和2.监听动画结束点。这两个逻辑是实现重复动画的基础。</p>
<h2>应用场景<br />
</h2>
<p>将 imageView 等 UI 控件,设置成平移的动画,并且一直动画中。</p>
<p>transform 可以实现控件的平移,但是无法连续动画。</p>
<h2>API 及语言<br />
</h2>
<p><strong>核心逻辑/代码</strong></p>
<p>transform 可以将控件平移,为了达到连续动画,可使用递归方式实现。</p>
<p><strong>动画实现<br />
</strong></p>
<p>设置动画并开始<br />
使用 UIView.animate(withDuration: , animations: , completion: ) 函数设置动画。</p>
<p>这个方法有开始动画事件,也有监听动画完成事件(completion 方法)</p>
<p><strong>实现连续动画</strong></p>
<p>在completion 中递归调用开始动画函数,达到连续动画的效果。</p>
<p><strong>停止动画<br />
</strong></p>
<p>设置一个全局的标示,来记录动画的状态,也可以通过更改这个状态来判断是否需要开始动画,比如设置 UI 控件的isHidden属性,实现停止动画</p>
<p><strong>细节</strong></p>
<p>在开始动画的时候,就进行判断,如果isHidden为 true,则直接停止动画。可以精准控制动画的次数。</p>
<p>在开始动画函数中设置闭包,可以在闭包中设置停止动画的代码等。</p>
<p><strong>示例代码</strong></p>
<p>重复 3 次平移动画,在每次动画开始前都判断self.guideImageView.isHidden, 在动画过程中,如果要停止动画,只需设置 self.guideImageView.isHidden = false, 就停止动画。</p>
<div class="jb51code">
<pre class="brush:js;">
func guideAnimations() {
      // 动画执行 3 次
      var count = 3
      // 开始动画
      startAnimation { in
            guard let self = self else { return }
            count -= 1
            if count == 0 { self.guideImageView.isHidden = true }
      }
    }
   
    // 设置并开始动画
    func startAnimation(_ complete: @escaping ()-&gt;()) {
      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: { (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
      }
    }</pre>
</div>
<p>到此这篇关于Swift使用transform 实现重复平移动画效果的文章就介绍到这了,更多相关transform 重复平移动画内容请搜索琼殿技术社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持琼殿技术社区!</p>
                           
                            <div class="art_xg">
                              <b>您可能感兴趣的文章:</b><ul><li>简陋的swift carthage copy-frameworks 辅助脚本代码</li><li>swift表格控件使用方法详解(UITableview)</li><li>WKWebview非全屏自动播放h5视频的实现方法(Swift、OC)</li><li>swift闭包和OC block类型的使用</li><li>Swift中的协议(protocol)学习教程</li><li>swift framework使用OC 代码两种方式示例</li></ul>
                            </div>

                        </div>
                        <!--endmain-->
頁: [1]
查看完整版本: Swift使用transform 实现重复平移动画效果