转载

iOS-drawRect-实现小船随波浪起伏的动画

最近有朋友让我帮他看一个demo的实现,这个demo需求描述很简单:

实现小船随波浪起伏的动画

先上效果图,有兴趣的童鞋,可以先自己想想实现方式再看我的思路:

1 分析问题:此需求页面有两个元素:一个小船,一个曲面

1.1 小船很简单,UIImageView+一张小船图片就可以

1.2 曲面是一个正弦曲线或者余弦曲线,向上偏移一定量,

此曲线与一条线之间的空间填充上颜色,也能实现;

2 重难点问题分析:

2.1 正弦或余弦曲线怎么画: 网上有很多实现方式,这里不再赘述,

本文是参考一个类叫NBWaveView,实现正弦曲线的

2.2 小船怎么与曲线同步起伏: 由观察得知小船在起伏的时候,

大小没有变化,

变化的是位置(center)和transform,

接下来就是找出小船对应每一点的center和transform;

3 重点解决小船对应没一点的center和transform

为了方便叙述,先画两张张图:

iOS-drawRect-实现小船随波浪起伏的动画

示意图.jpg

iOS-drawRect-实现小船随波浪起伏的动画

抽象图.jpg

有兴趣的同学可以研究一下,

没兴趣请当做没有看到这两张图,直接看结论:

//transform角度为
 CGFloat angle = self.config.waveA * self.config.wavePeriod *
               cos(self.config.wavePeriod*(self.width/2)+self.config.waveOffset);
//中心点坐标为
self.imgView.centerY = self.imgView.size.height/2*cos(angle)+y-self.imgView.size.height;
self.imgView.centerX = self.imgView.size.height/2*sin(angle)+self.width/2;

详细实现请下载demo

如有任何问题欢迎留言,请各位看官不吝赐教!

正文到此结束

所属分类：移动开发

本文标签： ACE UI id tar http IO https src 图片 git 同步 ORM ip 空间需求 IOS GitHub 下载 API
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二