PLM之家精品课程培训

PLM之家精品课程培训

联系电话:18301858168   |   QQ咨询:939801026
NX二次开发培训

NX二次开发培训

UFUN/NXOpen C++和实战案例

适合初级入门或想深入了解二次开发的工程师,本培训结合ufun,NXOpen C++,大量的实例及官方内部的开发技术。
公众号二维码

关注公众号

点击扫描二维码免费在线高清教程

课程详情
Catia二次开发培训

Catia二次开发培训

市场需求大,掌握核心技术前景广阔

Catia二次开发的市场需求大,人才稀缺。掌握开发技能潜力巨大,随着经验积累将在汽车、航空等领域有所作为。
B站二维码

在线原创B站视频

点击关注工业软件传道士主页

课程详情
Teamcenter培训

Teamcenter培训

全方位培训,从基础应用到高级开发全覆盖

涵盖用户应用基础培训、管理员基础培训、管理员高级培训及二次开发培训等全方位内容,由多年经验讲师打造。
QQ群二维码

加入同行交流

点击扫描二维码加入QQ群

课程详情
×

PLM之家plmhome公众号

课程涵盖: PLM之家所有原创视频

×

关注B站视频

所有高清视频一览无余,全部在线播放学习

×

加入PLM之家QQ群

同行交流,疑问解答,更多互助

PLM之家PLMHome-国产软件践行者

[前端框架] 动画库TweenJS常见动画变化方法库

[复制链接]

2020-2-6 16:28:24 1770 0

admin 发表于 2020-2-6 16:28:24 |阅读模式

admin 楼主

2020-2-6 16:28:24

请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!

您需要 登录 才可以下载或查看,没有账号?注册

x
1 v! S( v' C; d3 |6 p; _8 p
  E3 g0 {# P* y: V2 ^

4 J' Q& U, _' B  E# q动画库tween.js) `. F2 z. p) s: i% t* J& y
1 h9 K- _5 [4 L5 X# V  w- j9 A& h
相关资料 http://robertpenner.com/easing/, K1 e0 _8 |5 p! j
9 e+ }1 ]" G( S1 _8 ~
8 Z# q' o( ^" v6 m1 @: L: W3 _7 s  T
Linear:无缓动效果;) i% C# q' O6 }0 x$ e
Quadratic:二次方的缓动(t^2);( Z1 O: C# _# e, A& z* l9 E/ q
Cubic:三次方的缓动(t^3);3 f8 i! K: K$ g9 {5 L# W6 |
Quartic:四次方的缓动(t^4);$ o( q" e. c5 e
Quintic:五次方的缓动(t^5);
9 G+ o# B% H& y. ?Sinusoidal:正弦曲线的缓动(sin(t));
1 M# \/ z* I! |7 g5 `2 U' T+ @# @Exponential:指数曲线的缓动(2^t);- [' A) a+ r$ _9 R
Circular:圆形曲线的缓动(sqrt(1-t^2));  T/ e* z/ U* \8 T( c
Elastic:指数衰减的正弦曲线缓动;/ z" F0 X- u* H: ^1 Z$ A
Back:超过范围的三次方缓动((s+1)*t^3 - s*t^2);: R7 s7 {. W9 L
Bounce:指数衰减的反弹缓动。
9 N+ Z" S! m$ @4 y! Ips:以上都是自己的烂翻译,希望各位修正。
6 b! H; ^( W" `7 I3 ^& `
" x+ v0 q  M$ p2 y每个效果都分三个缓动方式(方法),分别是:
# }* g5 J* ]2 S% e, X7 l. QeaseIn:从0开始加速的缓动;, \' d5 s' v: n- v
easeOut:减速到0的缓动;
9 H2 g6 G' `6 T8 }0 PeaseInOut:前半段从0开始加速,后半段减速到0的缓动。/ ^* W. ^5 }% L# U5 _7 p
其中Linear是无缓动效果,没有以上效果。7 o& \9 W4 k1 `0 C% Z  J( `: e8 ~

4 F5 Q4 k  z1 v+ s2 M
/ J- v- I. k9 m3 _! O$ N
这是as代码,四个参数分别是:
7 J7 M$ ]! Q  N3 w& |+ `t: current time(当前时间);+ L  {. K2 E5 g( @+ S0 ~
b: beginning value(初始值);
- {. t. u# m3 p  h, Tc: change in value(变化量);$ i+ E$ X& ]0 t6 @. e
d: duration(持续时间)。' |+ j. A1 p! S3 H
ps:Elastic和Back有其他可选参数,里面都有说明。9 Q6 [9 m& p4 o$ g3 @
9 e* @* s. |6 t
那如何在js中利用这些算法呢?可以看到,虽然是as代码,但里面的程序是可以直接放在js里使用的。
  W5 T( _: h# o" _( Y我们可以定义一个类,把它这部分放在里面:
+ \. c6 r% n1 @3 ]& k4 @
- _! A1 z! ~7 j: m. ~8 N' ^
7 O' X" s2 @- f0 o. V

. [& y% ~3 V4 k+ z) h% w[mw_shl_code=javascript,true]var Tween = {
. U7 S3 b/ ^- f- K; Y    Linear: function(t,b,c,d){ return c*t/d + b; },
0 o2 a# n( H# b1 x    Quad: {& B! S. [+ @. f6 R1 y
        easeIn: function(t,b,c,d){9 [( ^7 N* v7 J
            return c*(t/=d)*t + b;5 N0 G$ k, U+ d. T" T
        },
' _9 |9 o# f" i: Z2 B        easeOut: function(t,b,c,d){
. W& R# t( r$ L$ T            return -c *(t/=d)*(t-2) + b;
) C! j0 _% F4 `        },
2 ^* [& L8 D: }* G" G  E* [" I        easeInOut: function(t,b,c,d){
9 A4 }. U3 \: v( q! h            if ((t/=d/2) < 1) return c/2*t*t + b;- M* k8 s7 f3 b
            return -c/2 * ((--t)*(t-2) - 1) + b;! a3 `5 ]# v+ Y' r) C( c. j2 D7 }/ D
        }
7 \. S3 x. V* ^1 Z- z    },. l% P. J9 q8 x& X  I  g! p; c, K
    Cubic: {
# [. B/ \/ }# o; J6 }( I: p        easeIn: function(t,b,c,d){4 I) N  S' {& |# a
            return c*(t/=d)*t*t + b;
2 A* w8 Q) O8 x9 U! u& |        },# O9 v6 R: k" ~0 T* ]4 v0 k  N3 P
        easeOut: function(t,b,c,d){
- ]6 N+ f( z& U4 g3 K+ Y$ ^            return c*((t=t/d-1)*t*t + 1) + b;& }- z9 [1 E% z4 V, V! c
        },
! Y: w4 O6 e* X& {        easeInOut: function(t,b,c,d){
3 H7 z5 R1 M2 F3 r, L2 F            if ((t/=d/2) < 1) return c/2*t*t*t + b;& f: |" a/ p# E" w9 X) I
            return c/2*((t-=2)*t*t + 2) + b;  R' b5 H: Z- w7 r5 ]
        }
' u+ N' v2 P* b# r2 m5 a    },  u# C9 [, S/ X/ R5 ~" p
    Quart: {
. F& w2 }) M0 C. c8 m        easeIn: function(t,b,c,d){
6 n" X1 ?5 m' O# x9 ?            return c*(t/=d)*t*t*t + b;6 N$ M: M1 \$ t/ e. @
        },3 D' M9 D! }6 d1 T, H0 V- o
        easeOut: function(t,b,c,d){7 s; ~( M5 ^0 x% A% m+ Z* S
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
3 A) {, A5 r' c) o' ]3 |/ Q8 i        },1 C! D0 M0 G& n
        easeInOut: function(t,b,c,d){
$ H+ t- ~) Y: @            if ((t/=d/2) < 1) return c/2*t*t*t*t + b;7 {; H+ x. }; o4 A# P  A9 ]
            return -c/2 * ((t-=2)*t*t*t - 2) + b;
: n+ p9 M/ k. K3 ]2 |+ h; {4 ^' N8 }        }
3 h2 K3 u6 m* Z. L0 A7 R  g1 T    },; z6 ]$ z7 M6 J# N, ^
    Quint: {
' q3 \9 [7 y( d        easeIn: function(t,b,c,d){
0 Q0 W9 S1 G* d3 p            return c*(t/=d)*t*t*t*t + b;$ V# q2 {! I+ \" |, f8 ?0 e7 ]7 X
        }," t; v# s6 y7 m  K+ w, U+ g
        easeOut: function(t,b,c,d){3 s4 C) W- _( [, x
            return c*((t=t/d-1)*t*t*t*t + 1) + b;
+ v7 k$ f! Y1 R5 t8 M8 M+ _1 ~        },
9 X' V3 \+ l5 A: X! t" l        easeInOut: function(t,b,c,d){
/ z( Z9 e1 k- ?! j/ {            if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;0 j2 Q7 b! {1 h+ m- X# x: N( c7 |4 G
            return c/2*((t-=2)*t*t*t*t + 2) + b;
$ X) K) L2 E1 e2 b& {; l7 `" u2 r        }
  ?( b' k1 e4 k: F! Z    },7 d5 }- c3 i" h) g
    Sine: {
5 N4 Q! B4 {; T0 G& _% g        easeIn: function(t,b,c,d){
9 F/ z5 f/ ^: T& v: b            return -c * Math.cos(t/d * (Math.PI/2)) + c + b;9 V$ h0 \9 D5 s# u
        },
+ c/ a$ H. n- W4 r% z9 H        easeOut: function(t,b,c,d){. j' v6 U/ N5 r: B  f
            return c * Math.sin(t/d * (Math.PI/2)) + b;
6 e; J3 J( q1 {0 ], R( C        },) S8 s- g6 y, R( |
        easeInOut: function(t,b,c,d){3 d5 v" F: f$ m; G. o( o" R
            return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
. F2 |5 a/ T' H9 w! T) j4 q2 q        }
: k4 S5 @8 ]1 z7 Q' ^    },5 ~  a$ }1 _9 M
    Expo: {
' w  J  T' y8 X: V8 s* o" P0 `        easeIn: function(t,b,c,d){2 x1 X1 L7 f5 J; h
            return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
4 ^3 [, t4 }5 x: g# V! O        },
# M. @2 w9 h1 [$ L. B7 t% x        easeOut: function(t,b,c,d){  A7 V  w( y+ Y! C# c. V
            return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;' z0 j$ q0 a  A0 J( r& |" I; `
        },  z( e# R/ K( g- t" D2 K
        easeInOut: function(t,b,c,d){) x2 v/ M+ O+ y& U# X4 b
            if (t==0) return b;
" f: p3 I, V4 c, q* I# E6 z            if (t==d) return b+c;" Q* `6 R8 k: x0 T. _4 t9 Z, R
            if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
6 l5 U9 P+ _' p) A6 z* P" |8 g            return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;- F' Z6 C9 |! Q- k- J
        }) i% }! ?7 v4 w' E- d3 J
    },$ R! @" Q0 v. e+ {4 T
    Circ: {
8 r$ ^6 C- ]# s3 }( i2 _7 V& ^        easeIn: function(t,b,c,d){0 n% O6 `6 ~2 F$ K
            return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
' a. E2 E& W' H8 [/ [        },6 Z! ~: C. B7 j; C* ]7 V
        easeOut: function(t,b,c,d){  t6 \4 ?# e8 x% {
            return c * Math.sqrt(1 - (t=t/d-1)*t) + b;! C% m. m$ D% n4 z
        },4 t. J0 @' w* T- a7 }7 u, r% q- \1 }: q
        easeInOut: function(t,b,c,d){
5 ^3 o( d3 C2 U8 ]/ E            if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
0 x: \# a5 M: ]" E  o            return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;5 @" Q% Y* o. b5 O
        }
; @5 X0 ], i  E% Q    },& y! L" Y% K3 Q# F& t
    Elastic: {
9 @, b) O, ?, x" L! C        easeIn: function(t,b,c,d,a,p){
5 W8 h: z' [" T6 d            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
. v9 c7 q( D+ j2 \3 K+ b  r7 v            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }, X5 w# Z+ y$ [: @8 K
            else var s = p/(2*Math.PI) * Math.asin (c/a);
" ?1 w$ ^8 t; f0 c+ S) |) C& d( ]6 S            return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
. \  i( A1 f* y7 _# Q) L        },
6 e- V- n  A# F: h1 [, h        easeOut: function(t,b,c,d,a,p){
1 n) O% C* N0 U$ y# w            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;2 |8 `4 n3 }* r# B" |  ?( k7 w
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
! F# W' f' q. W6 J2 \. d9 i8 v" E            else var s = p/(2*Math.PI) * Math.asin (c/a);
, r& l/ a: u6 V- d0 J            return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);9 c6 D( \8 \4 _2 V5 o  R2 W! O
        },9 h0 q/ ^6 B. Z' o
        easeInOut: function(t,b,c,d,a,p){
8 e/ L% X' o/ x7 S6 J- _( G            if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);2 |1 P% C, j! T! q# ]
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }; F; t# {+ e8 Y2 W- \7 B( }
            else var s = p/(2*Math.PI) * Math.asin (c/a);5 J' U. r+ q8 R( d" b
            if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
1 ?; Q% \9 w  C; c0 A            return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;% `8 y# B! i7 A- i! O# n/ y" l
        }9 l% q6 L2 C9 {$ J7 w/ a
    },9 f3 ?( ?: G6 T1 q4 _. A* p; B
    Back: {
7 Q, ^  K+ }/ U; Q/ B  _, r. \        easeIn: function(t,b,c,d,s){
) _3 S: a: V5 J6 ^% n            if (s == undefined) s = 1.70158;
$ J  F, Z) R" P$ C( V            return c*(t/=d)*t*((s+1)*t - s) + b;
7 f# s4 m+ `' L5 o        },1 n9 w& x8 l# S3 ^( R( z. K
        easeOut: function(t,b,c,d,s){
( K) s& B" O/ ^2 |4 R            if (s == undefined) s = 1.70158;
4 Y( W, \' O: ~! b            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;* G0 Q1 m6 n; [6 X/ o7 v
        },
& z7 Q" Y2 q0 f! e        easeInOut: function(t,b,c,d,s){
6 x2 f! a; G( ]9 W& C6 Y- n            if (s == undefined) s = 1.70158; , s/ q4 X" O" c0 x
            if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
7 M6 }' R; N# L2 ~% [, q            return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;" B% e. @$ M0 h& C) b6 p$ p, w
        }
/ a% t& j! g; N9 f" W& W    },
0 S2 C- T) M+ ~7 V+ N# o" ?    Bounce: {
1 f5 P/ j4 i' d        easeIn: function(t,b,c,d){
+ x: N4 F: M  \0 I& Z7 ?7 ?            return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
! F6 x& ~4 h2 a( v( z. t: A+ O3 n        },% Z$ {: O. N+ S% @9 p+ \
        easeOut: function(t,b,c,d){( }: ~. \$ y4 _7 G  U0 H% o
            if ((t/=d) < (1/2.75)) {
, M' W# @0 i9 f& e4 m9 v5 u% q* n                return c*(7.5625*t*t) + b;# k. P2 G. ]3 f4 ^( a9 \4 _
            } else if (t < (2/2.75)) {
4 ]  n7 M( k# ?                return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;5 O- o: c/ n: S4 G8 |* {1 _
            } else if (t < (2.5/2.75)) {
; \- {9 B$ ?: V7 o$ Q/ ]6 x                return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
2 u* ]/ I. b2 p( W* g            } else {
/ f: _$ Y5 K. j5 c, J; B  w                return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
7 t9 b7 O( `. o" O. W! k( m            }5 t. A- e8 i! i! q# w# m: h
        },
0 L4 q* y1 ^; t0 f4 d" u; k' s2 E        easeInOut: function(t,b,c,d){; f: {0 ^9 B# G8 W+ D8 q8 d  w
            if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;- k5 Y8 k$ f( Y- ]9 ]
            else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
' ^: W7 Q9 f7 o/ B% ]' Z2 Y2 S        }
3 x- J. s! C' N" `' k( A6 n; o    }
  b, h! S( m1 \7 K! e$ B7 s, \}[/mw_shl_code]
7 V  `" }: u4 E8 x. ^  z
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了