实现动画的一种思路

gitHub上看到个不错的动画 https://github.com/KittenYang/KYBezierBounceView

没看他代码之前,我想了半天应该怎么实现这个效果:

这个蓝色的view拉了之后是个不规则的形状,虽然只有一边是不规则的,但是也不能直接用frame动画来做了,

那就只能用CAShapeLayer来自己画形状了,要画一个这样的形状,还不能直接用 UIBezierPath已经提供的方便的类方法来画,

只能用 Path construction的方法来画;但是如果用Path construction的方法来画的话,动画做起来就麻烦了,

因为path的动画不太好控制,只写好path的初始值和最终值,不知道系统会怎么样给动画插值;

在这里因为只有一个边在动,所以还能控制,那剩下的问题就是怎么让动画跟着手势变动。

这个就只能写个以位移为参数的生成当时整个形状的贝塞尔曲线的函数。。。。

然后以手势移动量来设置path就行了。

问题是解决了,但是实现起来好麻烦。。。所以这个方案也就仅停留在理论阶段了。

然后看了作者代码,发现他的实现比我想的简单的多:

在这个蓝色的view上覆盖一个CAShaperLayer,将其填充色设置为其他颜色,然后只需要写在动的一边的贝塞尔曲线就行了!

这样的效果看起来就像是你在拖动一个矩形的某一边,但实际上你只是拖动了在屏幕外的一条线,拖出来一个新的layer覆盖住了原来的view。

同样的效果,看起来完全一样,但是实现方法的难易程度却差了很多,再考虑到之前的另外一个例子:http://www.cnblogs.com/Phelthas/p/4523328.html

让我发现了一个看似简单但很容易忽略的事实:

眼睛看到的动画效果可以用 跟它看上去不一样的方式甚至完全相反的方式来实现,而且实现起来说不定更简单~~

就比如说上面提到的这个动画,看起来是拖动了蓝色的view,其实是拖动了看不到的一个layer。。。

另:

iOS7已经提供了UIView的弹簧动画:

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);

但是像path动画这种貌似还是得用keyFrameAnimation的方式来实现,具体就是要设置keyFrame动画的几个关键帧

keyFrameAnimation.values = @[(id)path1, (id)path2, (id)path3, (id)path4, (id)path5, (id)path1];

其中path1,path2。。。分别是那几个关键帧的layer的具体的位置。

iOS7也提供了新的关键帧动画api:

+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations NS_AVAILABLE_IOS(7_0); // start time and duration are values between 0.0 and 1.0 specifying time and duration relative to the overall time of the keyframe animation

需要两个方法配合使用,例子:

[UIViewanimateKeyframesWithDuration:0.25 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeCubic animations:^{

[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:2/3.0 animations:^{
            self.label.transform = CGAffineTransformMakeScale(1.5, 1.5);
        }];
        [UIView addKeyframeWithRelativeStartTime:2/3.0 relativeDuration:1/3.0 animations:^{

self.label.transform=CGAffineTransformMakeScale(1.0,1.0);

}];
    } completion:^(BOOL finished) {

}];

里面的方法是添加某一个关键帧,startTime和duration都是从0-1的相对与外面的Duration的时间,注意这两个参数都是小数,直接1/2是不行的!!!

 
时间: 2024-08-30 16:28:03

实现动画的一种思路的相关文章

【Android自定义View实战】之仿百度加载动画,一种优雅的Loading方式

转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53470872 本文出自[DylanAndroid的博客] Android自定义View实战之仿百度加载动画一种优雅的Loading方式 第一个仿百度加载动画用ObjectAnimator属性动画操作ImageView的属性方法实现 第二个仿百度加载动画第二种实现方式用ValueAnimator原生的ondraw方法实现 第三个扔球动画-水平旋转动画 第四个扔球动画-垂直旋转动

实现支付宝咻一咻的几种思路

对于如今最火的无外乎集五福了,而五福除了加十个好友获得外,最直接的途径就是支付宝的咻一咻了.那么咻一咻详细有哪些实现方式呢?以下我们将一一介绍这几种思路的实现过程. 1.自己定义View实现咻一咻 那么这样的实现方法须要掌握Canvas以及Paint差点儿全部的方法.其对程序猿的专业知识要求极高. 用该种方式实现的长处有: ㈠这样的是最复杂的实现方法,但其兼容性最高.其支持android的全部设备. ㈡其对内存要求不大,差点儿不占用不论什么内存. 以下我们来看看是如何实现其效果的: public

Android JSON原生解析的几种思路,以号码归属地,笑话大全,天气预报为例演示

Android JSON原生解析的几种思路,以天气预报为例 今天项目中要实现一个天气的预览,加载的信息很多,字段也很多,所以理清了一下思路,准备独立出来写一个总结,这样对大家还是很有帮助的,老司机要开车了 涉及到网络,你就一定要先添加权限,准没错 <!--网络权限--> <uses-permission android:name="android.permission.INTERNET" /> 一.归属地查询(JSONObject) 这个也是最简单的一类Json

Reorder List [leetcode] 这两种思路

第一个想法随着vector保存全部Node* 表拼接出来 void reorderList(ListNode *head) { vector<ListNode*> content; ListNode * cur = head; while (cur) { content.push_back(cur); cur = cur->next; } int size = content.size(); cur = NULL; for (int i = 0; i <= size - 1 - i

解决session共享的几种思路

session与cookie的区别在于:session是保存在服务器端,cookie保存在客户端.session怎么样保存的?以文件的形式保存. 第一种办法:把原来存储在服务器磁盘上的session数据存储到客户端的cookie中去.php由原来的"从本地(也就是服务器)磁盘上读取session数据"转变为"浏览器的cookie中读取数据",一般是把session数据按照自己定义的加密规则,加密后后存在cookie中.数据保存在cookie中这种做法有好处,也有坏处

PHP 两个多维数组根据某个键的值进行组合排序的几种思路

需求: 有两个多维数组 $arr = [ ['name'=>'dee','age'=>28], ['name'=>'emperor', 'age'=>30], ['name'=>'Lee', 'age'=>32], ['name'=>'Arshavin', 'age'=>33] ]; $arr2 = [ ['name'=>'Ozil', 'age'=>27], ['name'=>'CR7', 'age'=>29], ['name'=&

Reorder List [leetcode] 的两种思路

第一种思路是用一个vector存所有的Node* 之后再用两个指针将链表拼接出来 void reorderList(ListNode *head) { vector<ListNode*> content; ListNode * cur = head; while (cur) { content.push_back(cur); cur = cur->next; } int size = content.size(); cur = NULL; for (int i = 0; i <=

数据分析常见的七种思路

数据分析常见的七种思路:1.简单趋势通过访问趋势了解产品使用情况,便于产品迭代.访问用户量.访问来源.访问用户行为三大指标对于趋势分析具有重要意义.2.多维分解根据分析需要,从多维度对指标进行分解.例如浏览器类型.操作系统类型.访问来源.广告来源.地区.网站/手机应用.设备品牌.APP版本等维度.3.转化漏斗按照已知的转化路径,借助漏斗模型分析总体和每一步的转化情况.常见的转化情境有注册转化分析.购买转化分析等.4.用户分群在精细化分析中,常常需要对有某个特定行为的用户群组进行分析和比对:需要将

元素显示隐藏的9种思路

× 目录 [1]display [2]visibility [3]hidden[4]opacity[5]overflow[6]clip[7]transform[8]覆盖[9]偏移 前面的话 在网页制作中,元素的显示隐藏是非常常见的需求.本文将介绍元素显示隐藏的9种思路 思路一: display 对于元素显隐来说,最常见就是display:none | display:block,但是使用这种方法有个问题,元素的display属性在隐藏前并不都是block,还有可能是inline.inline-b