用缓动函数模拟物理动画

1、缓动函数简介

<1>缓动函数的动画效果是建立在CALayer层级的关键帧动画基础之上

也就是说用普通的UIView的Animation是无法直接实现缓动函数

<2>缓动函数是一系列模拟物理效果(如抛物线)方程式的统称，用以计算给定两点之间的插值

<3>两点之间插的值越多，效果越好，但是会耗费更多的性能

<4>只有理解了缓动函数的原理才有可能写出自己想要的效果

学习来自：《极客学院》之 "用缓动函数模拟物理动画"

YouXian老师封装好的可复用的缓动函数源码百度云下载地址链接: http://pan.baidu.com/s/1kUeIHPt 密码: 76kq

然后下载一些东西，以及封装好的缓动函数YX代码文件。

2、缓动函数与关键帧动画的联系

>1、关键帧动画需要提供很多的帧来完善动画效果
>2、关键帧动画的帧可以通过一定的数学计算来提供需要的帧数
>3、关键帧动画只需要提供起始点，结束点，就可以通过缓动函数来计算中间“缺失”的帧
>4、缓动函数可以指定计算出多少帧
>5、帧数越多，动画越流畅，但同时耗费更多的GPU性能

首先我们需要通过代码实例了解基本动画和关键帧动画的区别：

同样的目的地，同样的运动间隔时间，效果是这样的：

好，理解了基本动画和缓动函数之后，那么我们就通过代码使用一位不认识的大神写的C语言缓动函数以及YouXian老师用OC封装好的代码，只改了一点点之前的代码：

效果：

3、用缓动函数模拟弹簧效果

首先如果要使用缓动函数模拟弹簧效果的话，那么就需要使用ElasticEaseOut函数来创建弹簧效果
将ElasticEaseOut创建出来的帧数组添加到关键帧动画中
弹簧效果用途

首先来实现弹簧效果，代码：

然后效果很好玩哦，弹簧的感觉：

额外学习到的东西：

在运动完成之后就重新分配位置，那么这也是一个很好的思路参考哦，之前因为动画是虚无不存在的，导致如果使用触发事件的话，是不建议用核心动画的，因为位置变了，但是能触发事件的位置却在原处，所以小码哥老师建议：在不涉及到事件处理的时候用UIView动画：

这个就被上面的代码解决了。

然后看看将上面的代码运用在实现钟摆效果上：

4、用缓动函数模拟碰撞效果

不过这个缓动函数有一个小bug，就是第一跳并没有达到目标位置。

5、用缓动函数模拟衰减效果

视频里的老师说，做侧滑动画效果，但个人觉得不太理想，还需要更多的测试：

用缓动函数模拟物理动画相关推荐

WPF中的动画——（四）缓动函数
缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样.它们一般应用在From/To/By动画上,可以使得其动画更加平滑. var widthAnimation = new D ...
JS实现动画特效2（缓动函数封装、导航栏筋斗云效果）
JS实现的动画特效:手风琴特效展示图片.筋斗云动画一.小知识 1.浏览器的offsetLeft是就近取整,要实现向上取整或向下取整,可以调用Math.ceil()或Math.floor() 2.想要 ...
Dotween SetEase Ease缓动函数
例如 :cameraTrans.DOLocalMove(pos, time).SetEase(Ease.OutExpo); Ease.InQuad 不知道Quad代表什么意思 Ease.InQu ...
缓动函数 Easing Functions
缓动函数 Easing Functions 缓动函数自定义参数随时间变化的速率. 常见效果 Linear:无缓动效果: Quadratic:二次方的缓动(t^2): Sinusoidal:正弦曲线的 ...
Easing 缓动函数收集
Easing 缓动函数收集缓动函数 ECharts图表 jquery easing 插件 Java 参考资料之前收集了不少链接,结果久了都404了.还是得复制一份代码过来才放心. 缓动函数 ECh ...
CocosCreator之缓动函数类 Easing
官方文档:使用缓动系统 · Cocos Creator 效果图地址:https://easings.net/ /** !#enThis class provide easing methods for ...
DOTween-Ease缓动函数
Ease.InQuad 不知道Quad代表什么意思 Ease.InQuart 有1/4的时间是没有缓动. Ease.InQuint, 是1/5时间没有缓动. Ease.InExpo ...
cocos2dx 圆盘抽奖_easing--缓动函数--贝塞尔函数--圆盘转动抽奖应用
一.transition 和 animation css上面两个属性允许你指定缓动函数. 不幸的是,他们不支持所有的缓动函数,所以你必须指定贝赛尔曲线实现缓动函数. 选取缓动函数以显示贝赛尔曲线. d ...
用缓动动画实现鼠标跟随
鼠标跟随是为了更好的用户体验而存在,鼠标移动到某个元素的位置,一张代表鼠标的图也移到当前元素的位置,用户能更好的看到自己的鼠标位置,也能用这个做普通特效.当鼠标移动到某个位置,那张图也移动到某个位置, ...

用缓动函数模拟物理动画

用缓动函数模拟物理动画相关推荐

最新文章

热门文章