滑动scrollview时,随距离改变属性的动画原理!(类似陌陌,网易,path个人属性界面的动画效果)
2014-12-10 10:12
393 查看
遇到的问题:
有些动画效果是通过scrollview的Contentoffset的值进行时时变化的,实现原理也基本就是监听了这个属性的变化。
监听的方法有多种,可以通过kvc(推荐),也可以通过scrollviewdidscroll进行判断。
但是会有一些暴力测试,滑动过快的会出现动画卡帧,或者控件偏移的情况产生。
对kvc不了解的可以看这里:
荣芳志专栏,Objective-C语法之KVC使用:http://www.cnblogs.com/stoic/archive/2012/07/20/2601315.html
产生原因:
经过测试,平常的缓缓滑动,通过在scrollviewdidscroll方法里面打出contentoffset.y的变换,每次变化值是0.5,但是快速活动时每次的变换是不一定的,也就是在0.5-20直接变动。
bug分析:
苹果的动画渲染也是有限制的,如果快速滑动,会省略很多过渡动画,但这样也可以欺骗人眼打到过渡动画效果。
所以在制作相关动画时要做响应的预判,如动画达到某个位置已经超过动画限制范围就做出相应的预判即可。
相关代码:
有些动画效果是通过scrollview的Contentoffset的值进行时时变化的,实现原理也基本就是监听了这个属性的变化。
监听的方法有多种,可以通过kvc(推荐),也可以通过scrollviewdidscroll进行判断。
但是会有一些暴力测试,滑动过快的会出现动画卡帧,或者控件偏移的情况产生。
对kvc不了解的可以看这里:
荣芳志专栏,Objective-C语法之KVC使用:http://www.cnblogs.com/stoic/archive/2012/07/20/2601315.html
产生原因:
经过测试,平常的缓缓滑动,通过在scrollviewdidscroll方法里面打出contentoffset.y的变换,每次变化值是0.5,但是快速活动时每次的变换是不一定的,也就是在0.5-20直接变动。
bug分析:
苹果的动画渲染也是有限制的,如果快速滑动,会省略很多过渡动画,但这样也可以欺骗人眼打到过渡动画效果。
所以在制作相关动画时要做响应的预判,如动画达到某个位置已经超过动画限制范围就做出相应的预判即可。
相关代码:
#define offsety scrollView.contentOffset.y #define endoffsety 153.0f -(void)scrollViewDidScroll:(UIScrollView *)scrollView { if (scrollView.tag == 1001) { if ((offsety > 0)&&(offsety<153)) { //更加距离变化计算,改变属性的方法 [self AnnimationWithProperty:offsety]; } else if (offsety < 0){ //更加距离变化计算,改变属性的方法 [self AnnimationWithProperty:0]; } else if ((offsety> 153)&&(_frontView.top > -153)) { //更加距离变化计算,改变属性的方法 [self AnnimationWithProperty:endoffsety]; } } }
相关文章推荐
- ScrollView滑动监听实现界面动画效果
- 代码抖动IOS 仿网易 banner scrollview 到头后 手势 事件提交到下级 拉开界面的效果
- ScrollView、ListView、GridView去掉边缘的蓝边和滑动条,改变item点击效果
- 【源代码】手把手教你Autolayout如何使用动画(附类似Passbook效果Demo+详细分析实现原理)
- JavaScript DOM中 改变样式属性,实现动画效果
- JavaScript DOM中 改变样式属性,实现动画效果
- JavaScript DOM中 改变样式属性,实现动画效果
- Path 2.0 大部分效果分享(tableview左右滑动,时间,menu动画),有码
- JavaScript DOM中 改变样式属性,实现动画效果
- JavaScript DOM中 改变样式属性,实现动画效果
- JavaScript DOM中 改变样式属性,实现动画效果
- 23、使用jQuery实现动画效果(原理:改变CSS)
- 属性动画实现viewpager改变页面的时候,带有指示条的动画效果
- JavaScript DOM中 改变样式属性,实现动画效果
- JavaScript DOM中 改变样式属性,实现动画效果
- 仿网易下拉菜单,UC底部弹出菜单(带动画效果,讲解原理)
- Android Design Support Library(一)用TabLayout实现类似网易选项卡动态滑动效果
- css3中变形函数(同样是对元素来说的)和元素通过改变自身属性达到动画效果
- JavaScript DOM中 改变样式属性,实现动画效果
- JavaScript DOM中 改变样式属性,实现动画效果