다음은 관심 있는 학생들을 위해 제가 정리한 tween.js에 대한 내용입니다.
먼저 기본 지식을 게시한 다음 Tween.js 사용 방법을 설명하세요.
1.第三方动画 tween.js 2.实现:缓动公式(效果:控制物体在某个时间段内的运动速度)
Easing 함수:
1.linear 匀速 2.Quad 二次方缓动效果 3.Cubic 三次方缓动效果 4.Quart 四次方缓动效果 5.Quint 五次方缓动效果 6.Sine 正弦缓动效果 7.Expo 指数缓动效果 8.Circ 圆形缓动函数 9.Elastic 指数衰减正弦曲线缓动函数 10.Back 超过范围的三次方的缓动函数 11.Bounce 指数衰减的反弹曲线缓动函数
각 Easing 함수에는 세 가지 효과가 있습니다.
1.easeIn 加速 2.easeOut 减速 3.easeInOut 先加速后减速
참고: 선형에는 한 가지 효과만 있습니다. 균일한 속도
각 함수에는 4개의 매개변수가 있습니다.
1.t====> current time:当前时间.解释为:开始的步数(一般从0开始),预示着一段动画的开始. 2.b====>beginning value 初始值.解释为:开始量(开始的属性值) 3.c====>change in value 变化量.解释为属性值的改变量:结束位置的属性值 - 开始位置的属性值 4.d====>duration 持续时间.解释为:结束的步数(运动的总时间)
참고: 시작 단계 수가 증가하여 종료 단계 수와 같아지면 전체 이동이 종료됩니다. 참고: t가 d와 같아질 때만 이동이 종료됩니다.
tween.js 사용 1. 다운로드 2. 가져오기 3. tween.js 구문 사용
Easing 함수 이름(t, b, c, d);
위 내용을 이해했다면 다음 부분은 건너뛰셔도 됩니다. 다음은 Tween.js에 대한 설명입니다. 다음으로 이 Tween을 사용하는 방법을 소개합니다. 먼저 b, c, d 세 가지 매개 변수(즉, 초기 값)입니다. , 변경량, 기간)을 완화 시작 전에 결정해야 합니다. 먼저 애니메이션 트위닝의 개념을 소개합니다. Flash는 애니메이션을 수행할 때 Tween 클래스를 사용하여 이징, 스프링 등과 같은 다양한 애니메이션 효과를 만드는 데 사용할 수 있습니다. tween.js는 Flash에서 트위닝 애니메이션으로 해석될 수 있습니다. 그렇다면 트위닝 애니메이션이란 무엇일까요?
相信学过Flash的都知道补间动画是flash主要的非常重要的表现手段之一.补间动画有动作补间动画与形状补间动画两种,但是在js中却不需要了解这么多. 好了,废话不多说,先看看百度百科关于补间动画给出的定义: 补间动画：做flash动画时，在两个关键帧中间需要做“补间动画”，才能实现图画的运动； 插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的
那么什么是关键帧呢? 举个栗子: 先科普一下,平常所看的电影,动画都是24帧的,24帧为一秒.在人眼可以捕捉的范围内.可以想象两个点之间有有22个点,形成一条直线或者曲线.而每一个点就代表一帧,帧——就是动画中最小单位的单幅影像画面,而单幅影像画面就可以看做是一个对象(一切皆对象,除去值类型)了.而这条线就代表对象的运动轨迹.
重点来了:
t:代表第一个点,也就是第一帧,也就是一个动画开始的地方. b:代表初始值,也就是开始量,我们看电影或者动画一般都不会看序幕把,那么跳过开头部分,选择第一帧和最后一帧之间你要开始看位置,而此位置就是初始值. c:代表的就是最后一帧减去初始值就是变化量, d:代表最后一帧,1s的结束,也是动画的结束
或者这样理解：
t:当前步数 b:初始位置 c:总距离(变化量) d:总步数
上面是我整理给大家的有关tween.js内容，希望今后会对大家有帮助。
相关文章：
위 내용은 tween.js가 무엇인지 자세히 설명하세요(그림 및 텍스트 튜토리얼).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
