对于一个区间内的缓动动画来说
中间的过渡值算法,很多都在使用Easing这种,无论是ActionScript、JavaScript还是刚刚才研究的Objective-C
具体思路如下
首先是计算出这个区间内的各个阶段
比如这个过程是分60帧的动画,那么在这60帧中的每一帧,计算出这一帧所得的值,放到一个数组里面,然后通过CAKeyframeAnimation来对这一组数值分别进行更换
而这组数值就是通过Easing的各种不同算法算出来的
具体代码如下
+ (id)animationWithKeyPath:(NSString *)path function:(AHEasingFunction)function fromPoint:(CGPoint)fromPoint toPoint:(CGPoint)toPoint keyframeCount:(size_t)keyframeCount
{
NSMutableArray *values = [NSMutableArray arrayWithCapacity:keyframeCount];
CGFloat t = 0.0;
CGFloat dt = 1.0 / (keyframeCount - 1);
for(size_t frame = 0; frame < keyframeCount; ++frame, t += dt)
{
CGFloat x = fromPoint.x + function(t) * (toPoint.x - fromPoint.x);
CGFloat y = fromPoint.y + function(t) * (toPoint.y - fromPoint.y);
[values addObject:[NSValue valueWithCGPoint:CGPointMake(x, y)]];
}
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:path];
[animation setValues:values];
return animation;
}
定义一个数组,用来存放每一帧的预期值
定义一个时间t,其实是0.0
定义一个每帧平分的比例,dt
然后for循环,计算中间平分每一帧的预期值,如x
预期值=起始值+Easing的变换方程带入(当前帧占总帧的百分比)*起始到预期之间的差距值
这样每帧就会按照Easing不同方程的规律得出相应的变化值了
关于animationWithKeyPath方法的参数,可以是如下
transform.scale = 比例轉換
transform.scale.x = 闊的比例轉換
transform.scale.y = 高的比例轉換
transform.rotation.z = 平面圖的旋轉
opacity = 透明度
margin
zPosition
backgroundColor
cornerRadius
borderWidth
bounds
contents
contentsRect
cornerRadius
frame
hidden
mask
masksToBounds
opacity
position
shadowColor
shadowOffset
shadowOpacity
shadowRadius
当然,这些事CAKeyframeAnimation所支持的,还可以自己去写自定义的属性值
分享到:
相关推荐
easing动画运动效果是一款简单的如淡入淡出以及自定义动画效果,支持直线匀速运功、变加速运动、缓冲等丰富的动画效果。
js动画缓动带有一点缓和的香草 JS! 这只是我打来的一个有趣的项目。 它是一个 JavaScript 类,可以管理屏幕周围多个元素的动画,所有元素都具有不同的动画时间和 3 种不同的缓动选项,线性、缓入和缓出。 缓动函数...
今天我给大家分享的是一款jQuery动画效果插件jquery.easing.js,使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。它非常小巧,且有多种动画方式供选择,使用简单且免费。
@(github-cimi-chen)[Github,Readme,Easing function,Interpolator,Animation] Thirty different easing animation interpolators for Android. Demo Installation In order to use the library, there are 2 ...
Easing Generator是一款用于创建基于ActionScript缓动引擎的自定义缓动效果的编辑器。 可以通过改变的参数来获取不同缓动效果的代码。 支持的缓动引擎 >> Tweener >> BetweenAS3 (可以十分灵活地控制) >> KTween ...
它提供了简单的动画效果,如淡入淡出以及自定义动画效果,使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。 虽然说插件出来的时间比较长,但它小,经过很多网站的使用,成熟度也非常的高。...
jQuery easing动画运动效果.zip
Sass、Less 或 Stylus 的缓动变量使用 Sass、Less 或 Stylus 缓动动画的一些有用变量。安装使用 Bower 安装: $ bower install --save sass-less-stylus.easing使用 npm 安装: $ npm install --save sass-less-...
Photoshop 脚本,可让您使用时间轴功能为 Photoshop 动画添加缓动效果。 这使用了 jQuery 可用的相同缓动。 要使用此脚本,请打开一个文件,其中至少创建了一个关键帧,将时间线设置为该关键帧,并选择了该图层。 ...
This class is used for Easing animation. Easy to understand You can use it to build your own animation How to use Import the header and use like this: // 计算好起始值,结束值 CGFloat oldValue = 0.f; ...
你可以使用以下的一些easing动画效果: linear ease ease-in ease-out ease-in-out ease-in-back ease-out-back ease-in-out-back ease-in-sine ease-out-sine ease-in-out-sine ease-in-quad ease-out...
想给UI或3D物体选择合适的缓冲动画却分不清那些有什么区别的可以看看这个,InBack、InCubic、InQuad都可以轻松区分。
缓动选择 一个简单的 jQuery 扩展,它创建一个选择框,其中包含 jQuery.easing 对象中所有可用的缓动算法。 用于测试动画。 与 jQuery 缓动插件配合使用效果很好: :
http://www.unitymanual.com/4709.html在Unity引擎中使用Easing Function制作动画 Posted on 201
在使用easing函数,然后使用 。 安装 $ yarn add reanimated-easing 用法 import Animated from 'react-native-reanimtaed' import { Easing } from 'reanimated-easing' const { Clock , Value , set , cond , ...
缓和处理功能 该存储库包含用于处理的标准线性映射功能的两个map()替换( map2()和map3() )。 该代码合并了各种常用的缓动函数,可以在找到完整的描述。
jquery.easing.js 1.3 是一个配合jquery实现完美动画效果的扩展插件,比如我们在使用jquery制作一幅图片滚动或图片渐变,使用本插件可扩展或增强jquery性能,生成完美无缺兼容性更好的jquery动画来,它不仅可以用于...
该源码实现动画中的缓动函数(easing function)。Easing function(http://easings.net/)就是让物体的运动过程遵循某类数学公式,即定好起点和终点,物体在这个移动过程中,按照某个线性或者非线性的速度来进行...
Android轻松功能 该项目最初来自我的另一个项目 ,它是一个动画集合,可帮助您简化动画。 那时,我仍然对动画效果不满意。 因此,我开始探索如何使其越来越真实。 我找到了制作的 ,然后实现了Easing Functions并做...
jQuery效果函数(slideUp()、fadeIn()等)和animation()函数都接收另一个用来控制动画过程的速度的参数,这就是缓动(easing),它确定了动画过程不同时刻的速度。例如,将一个元素移过页面的时候,可能让这个元素缓慢地...