이 글에서는 주로 tween.js easing tween 애니메이션 예제를 소개하고 참고용으로 제공합니다.
1. tween.js 이해하기
위 내용을 이해하셨다면 다음 부분은 건너뛰셔도 됩니다. 다음은 Tween.js에 대한 설명입니다. 먼저, b. 완화가 시작되기 전에 세 가지 매개변수 c 및 d(즉, 초기 값, 변경량, 기간)를 결정해야 합니다. 먼저 애니메이션 트위닝의 개념을 소개합니다. Flash는 애니메이션을 수행할 때 Tween 클래스를 사용하여 이징, 스프링 등과 같은 다양한 애니메이션 효과를 만드는 데 사용할 수 있습니다. tween.js는 Flash에서 트위닝 애니메이션으로 해석될 수 있습니다. 그렇다면 트위닝 애니메이션이 무엇입니까?
Flash를 연구한 모든 사람은 트위닝 애니메이션이 Tween의 주요하고 매우 중요한 표현 수단 중 하나라는 것을 알고 있을 것입니다. 애니메이션 트위닝 애니메이션에는 액션 트위닝 애니메이션과 모양 트위닝 애니메이션의 두 가지 유형이 있지만 js에서는 이에 대해 너무 많이 알 필요가 없습니다. 자, 더 이상 고민하지 말고 다음에서 제공하는 트위닝 애니메이션의 정의를 살펴보겠습니다. Baidu 백과사전: 트위닝 애니메이션: 플래시 애니메이션을 수행할 때 트위닝 애니메이션을 삽입한 후 그림의 움직임을 실현하려면 두 키 프레임 사이에 "트위닝 애니메이션"을 수행해야 하며 두 키 프레임 사이의 보간 프레임은
그러면 키 프레임이 무엇인가요? 예를 들어, 일반적으로 보는 영화와 애니메이션은 모두 24프레임이고, 24프레임은 사람의 눈으로 포착할 수 있는 범위 내입니다. 두 점을 상상해 보세요. 그 사이에 22개의 점이 직선이나 곡선을 이루고 있습니다. 각 점은 프레임을 나타냅니다. 프레임은 애니메이션에서 단일 이미지를 구성하는 가장 작은 단위이며, 단일 이미지는 하나의 객체로 간주됩니다. 객체, 값 유형 제외) 그리고 이 선은 객체의 이동 궤적을 나타냅니다.
두 번째 및 네 개의 매개변수
t: 현재 시간--> 애니메이션이 시작되는 프레임입니다.
b: 시작값-->은 초기값을 나타내며, 이는 시작값입니다. 우리는 영화나 애니메이션을 볼 때 일반적으로 프롤로그를 보지 않으므로 시작 부분을 건너뛰고 첫 번째 프레임과 마지막 프레임 위치를 살펴보기 시작하려고 하는데 이 위치가 초기값입니다.
c: 값 변화-->는 마지막 프레임에서 초기 값(변화량)을 뺀 값을 나타냅니다.
d: 지속 시간-->은 마지막 프레임, 1초의 끝을 나타냅니다. 이는 또한 애니메이션 마침입니다.
tween.js 사용법 1. 다운로드 2. 가져오기 3. tween.js 구문 사용
Easing 함수 이름(t, b, c, d)
참고: 숫자가 시작 단계 수가 종료 단계 수와 같아지면 전체 동작이 종료됩니다. 참고: t가 d와 같아질 때만 동작이 종료됩니다. 그렇지 않으면 동작이 중지되지 않습니다. 트윈 파일 코드
/*
* 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;
<!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>
트윈의 장점은 트윈의 효과가 문법이 아닌 알고리즘을 기반으로 한다는 점입니다. 특정 언어를 사용할 수 있으므로 장소가 매우 넓고 한번 배우면 평생에 도움이 될 것입니다. 위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.
관련 기사:
vue에 따라 전역 변수 또는 데이터 메서드 설정(자세한 튜토리얼)jquery를 사용하여 Enter 키를 클릭하여 로그인 효과를 얻으세요(자세한 튜토리얼)
현재를 가져오는 방법 vue.js의 값 요소의 텍스트 정보 방법
위 내용은 tween.js를 사용하여 완화 트위닝 애니메이션 알고리즘 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
