YQDownloadButton—带有波浪效果和震动波效果的动画

前言

最近在看《A-GUIDE-TO-iOS-ANIMATION》,这本书挺不错的,恰好旁边安卓同学过年时写了一个有点好看的按钮,自己就按照这个效果去写来玩玩~

效果图

1641067-82cc5e0cb68d1d24

动画主要有水波动画、震动波动画组成,以下分析主要实现,具体实现可以看源码,源码地址在文章最后

波浪效果实现

参考网上示例,主要有三种方式:

  1. 切一张波浪形的图片,进行不断循环的位置变化的动画
  2. 通过CAShapeLayer绘制波浪曲线,并不断改变垂直位置,来达到水面波动并上升的动画效果
  3. 同时绘制两个波形图,让它们彼此错开,下层的波形图层设置一定的透明度,两层水波交替波动时就达到波浪的视觉效果

我这里采取了第三种方法,利用两层水波交替波动达到波浪效果,如下代码所示
实现代码

绘制波浪方法:

前面if语句的代码可以使得progress为1.0后,水波上升不是立即上升,而是通过一个动画缓慢上升;后面代码通过正弦曲线公式y=Asin(ωx+φ)+k,绘制在每个时刻的波形图以达到水波动画的效果。

  • _wave_Amplitude,波纹振幅,A
  • _wave_Cycle,波纹周期,T = 2π/ω
  • offsetX,波浪x位移,φ
  • _wave_offsety,当前波浪偏移高度,k

震动波效果

震动效果先是让整体是如图变小,然后瞬间变大并带有弹簧效果,同时让震动波视图逐渐变大,并修改其alpha值,所有效果都可以通过UIView Animation来实现

实现代码

打钩动画

打勾动画的思路是给一个CAShapeLayer指定一个勾形的path,然后进行strokeEnd的动画,strokeEnd不是CALayer的属性,而是其子类CAShapeLayer的一个特有属性。所以我们先要创建一个CAShapeLayer,还有一个必须赋值的path,然后再进行绘制

实现代码

触发方法

这是个代理方法,刚开始点击箭头后就被调用,水波上升的动画执行时间,就是_progress被设置为1的过程,水波上升的最终高度可以通过_progress来控制

水波动画控制

实现代码

diaplayLink在屏幕刷新过程中不断调用changeoff方法,若水波上升到一定高度,也就是y轴偏移较小的时候,加快上升速率,待到水填满圆形容器的时候,执行打钩动画、震动波动画并停止波浪动画

小结

完成这个动画后,收获还是蛮大的,自己对于动画的理解更加深刻了,争取以后学习更多的动画知识。

具体实现看源码:Github地址,喜欢的给个star~

1 4 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部