tween.js 완화 트윈 애니메이션 알고리즘에 대한 자세한 설명
- 小云云원래의
- 2018-02-22 09:43:501698검색
이 글에서는 주로 tween.js easing tween 애니메이션 예제를 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.
1. tween.js를 이해하세요
위 내용을 이해하셨다면 다음 부분은 건너뛰셔도 됩니다. 다음은 이 Tween.js의 사용법을 소개하겠습니다. c, 완화가 시작되기 전에 d의 세 가지 매개변수(즉, 초기값, 변화량, 기간)를 결정해야 합니다. 먼저 애니메이션 트위닝의 개념을 소개합니다. Flash는 애니메이션을 수행할 때 Tween 클래스를 사용하여 이징, 스프링 등과 같은 다양한 애니메이션 효과를 만드는 데 사용할 수 있습니다. tween.js는 Flash에서 트위닝 애니메이션으로 해석될 수 있습니다. 그렇다면 트위닝 애니메이션이 무엇입니까?
Flash를 연구한 모든 사람은 트위닝 애니메이션이 Tween의 주요하고 매우 중요한 표현 수단 중 하나라는 것을 알고 있을 것입니다. 애니메이션 트위닝 애니메이션에는 액션 트위닝 애니메이션과 모양 트위닝 애니메이션의 두 가지 유형이 있지만 js에서는 이에 대해 너무 많이 알 필요가 없습니다. 더 이상 고민하지 않고 다음에서 제공하는 트위닝 애니메이션의 정의를 살펴보겠습니다. Baidu 백과사전: 트위닝 애니메이션: 플래시 애니메이션을 수행할 때 트위닝 애니메이션을 삽입한 후 그림의 움직임을 실현하려면 두 키 프레임 사이에 "트위닝 애니메이션"을 수행해야 하며 두 키 프레임 사이의 보간 프레임은
키 프레임이란 무엇인가요? 예를 들어, 우리가 일반적으로 보는 영화와 애니메이션은 모두 24프레임이고, 24프레임은 사람의 눈으로 포착할 수 있는 범위 내입니다. 두 점을 상상해 보세요. 그 사이에 22개의 점이 직선이나 곡선을 이루고 있습니다. 각 점은 프레임을 나타냅니다. 프레임은 애니메이션에서 단일 이미지를 구성하는 가장 작은 단위이며, 단일 이미지는 하나의 객체로 간주됩니다. 객체, 값 유형 제외) 그리고 이 선은 객체의 이동 궤적을 나타냅니다.
두 번째 및 4개의 매개변수
t: 현재 시간--> 시작됩니다.
b: 시작값-->은 초기값을 나타내며, 이는 시작값입니다. 우리는 영화나 애니메이션을 볼 때 일반적으로 프롤로그를 보지 않으므로 시작 부분을 건너뛰고 첫 번째 프레임과 마지막 프레임 위치를 살펴보기 시작하려고 하는데 이 위치가 초기값입니다.
c: 값 변화-->는 마지막 프레임에서 초기 값(변화량)을 뺀 값을 나타냅니다.
d: 지속 시간-->은 마지막 프레임, 1초의 끝을 나타냅니다. 이는 또한 애니메이션 마침입니다.
tween.js 사용법 1. 다운로드 2. 가져오기 3. tween.js 구문 사용
Easing 함수 이름(t, b, c, d)
참고: 숫자가 시작 단계 수가 종료 단계 수와 같아지면 전체 이동이 종료됩니다. 참고: t가 d와 같아질 때만 이동이 종료됩니다. 그렇지 않으면 이동이 중지되지 않습니다. code
/*
* Tween.js
* t: current time（当前时间）；
* b: beginning value（初始值）；
* c: change in value（变化量）；
* d: duration（持续时间）。
*/
var Tween = {
Linear: function(t, b, c, d) { //匀速
return c * t / d + b;
},
Quad: { //二次方缓动效果
easeIn: function(t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOut: function(t, b, c, d) {
return -c *(t /= d)*(t-2) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t-2) - 1) + b;
}
},
Cubic: { //三次方缓动效果
easeIn: function(t, b, c, d) {
return c * (t /= d) * t * t + b;
},
easeOut: function(t, b, c, d) {
return c * ((t = t/d - 1) * t * t + 1) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t*t + b;
return c / 2*((t -= 2) * t * t + 2) + b;
}
},
Quart: { //四次方缓动效果
easeIn: function(t, b, c, d) {
return c * (t /= d) * t * t*t + b;
},
easeOut: function(t, b, c, d) {
return -c * ((t = t/d - 1) * t * t*t - 1) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t*t - 2) + b;
}
},
Quint: { //五次方缓动效果
easeIn: function(t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
},
easeOut: function(t, b, c, d) {
return c * ((t = t/d - 1) * t * t * t * t + 1) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2*((t -= 2) * t * t * t * t + 2) + b;
}
},
Sine: { //正弦缓动效果
easeIn: function(t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOut: function(t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOut: function(t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t/d) - 1) + b;
}
},
Expo: { //指数缓动效果
easeIn: function(t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOut: function(t, b, c, d) {
return (t==d) ? b + c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOut: function(t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
},
Circ: { //圆形缓动函数
easeIn: function(t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOut: function(t, b, c, d) {
return c * Math.sqrt(1 - (t = t/d - 1) * t) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
}
},
Elastic: { //指数衰减正弦曲线缓动函数
easeIn: function(t, b, c, d, a, p) { //加速
var s;
if (t==0) return b;
if ((t /= d) == 1) return b + c;
if (typeof p == "undefined") p = d * .3;
if (!a || a < Math.abs(c)) {
s = p / 4;
a = c;
} else {
s = p / (2 * Math.PI) * Math.asin(c / a);
}
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
easeOut: function(t, b, c, d, a, p) { //减速
var s;
if (t==0) return b;
if ((t /= d) == 1) return b + c;
if (typeof p == "undefined") p = d * .3;
if (!a || a < Math.abs(c)) {
a = c;
s = p / 4;
} else {
s = p/(2*Math.PI) * Math.asin(c/a);
}
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
},
easeInOut: function(t, b, c, d, a, p) { //先加速后减速
var s;
if (t==0) return b;
if ((t /= d / 2) == 2) return b+c;
if (typeof p == "undefined") p = d * (.3 * 1.5);
if (!a || a < Math.abs(c)) {
a = c;
s = p / 4;
} else {
s = p / (2 *Math.PI) * Math.asin(c / a);
}
if (t < 1) return -.5 * (a * Math.pow(2, 10* (t -=1 )) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p ) * .5 + c + b;
}
},
Back: { //超过范围的三次方的缓动函数
easeIn: function(t, b, c, d, s) {
if (typeof s == "undefined") s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOut: function(t, b, c, d, s) {
if (typeof s == "undefined") s = 1.70158;
return c * ((t = t/d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOut: function(t, b, c, d, s) {
if (typeof s == "undefined") s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
return c / 2*((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
}
},
Bounce: { //指数衰减的反弹曲线缓动函数
easeIn: function(t, b, c, d) {
return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
},
easeOut: function(t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
},
easeInOut: function(t, b, c, d) {
if (t < d / 2) {
return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
} else {
return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
}
}
}
}
Math.tween = Tween;4. 밤을 주세요
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="Tween/tween.js"></script>
<style>
*{margin: 0;padding: 0;}
.out{width: 800px;height: 500px;background: #e5e5e5;position: relative;padding: 20px;text-align: center;}
.inner{width: 50px;height: 50px;border-radius: 50%;background: #FF0000; position: absolute;left: 50px;top: 50px;}
</style>
</head>
<body>
<p id="app" class="out">
<p class="inner" id="ball"></p>
<button id="start" @click="start()">start</button>
</p>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
t: 0,
b: 50,
c: 500,
d: 1500,
},
methods:{
start(){
var t = this.t;
const b = this.b;
const c = this.c;
const d = this.d;
const setInt = setInterval(()=>{
t++;
console.log(t)
if(t==300){clearInterval(setInt)}
console.log(t);
const ballLeft = Tween.Linear(t,b,c,d)+"px";
ball.style.left = ballLeft;
},20)
}
}
})
</script>
</html> 5. 개인적인 경험
트윈의 장점은 트윈의 효과가 특정 언어의 문법이 아닌 알고리즘을 기반으로 하기 때문에 어떤 언어에서도 사용할 수 있다는 것입니다. 다양한 곳에서 배울 수 있으며 평생 배우면 혜택을 누릴 수 있습니다.
관련 권장사항:
tween.js 사용에 대한 자세한 예간단한 애니메이션 라이브러리 캡슐화 tween.js 예제 튜토리얼Tween.js 애니메이션에 대한 자세한 소개위 내용은 tween.js 완화 트윈 애니메이션 알고리즘에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!