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 1748 0

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

admin 楼主

2020-2-6 16:28:24

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

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

x
: U% Y6 A; k2 m9 t  m% ]

$ _9 a, V; {, ], t" Q1 f% F
2 P) g: S# G5 Y8 k8 n7 @( a, P7 I动画库tween.js
) f) r3 w. T+ q$ E, C. X- p" d- S" K5 L! ~3 y! h% b
相关资料 http://robertpenner.com/easing/% G3 q1 l, n, b" a
( Q0 V' g  t  t+ C

  L+ B1 n. |4 O7 a- ~  uLinear:无缓动效果;0 C+ Y: I! r% c
Quadratic:二次方的缓动(t^2);
+ m! Z" r$ f( H( F, g. e2 jCubic:三次方的缓动(t^3);
! Y1 ~$ }' }$ ^, I# |' r2 L' S" s& mQuartic:四次方的缓动(t^4);9 H3 S+ a2 |" l, }
Quintic:五次方的缓动(t^5);8 E- R9 G: s7 G9 Z9 y
Sinusoidal:正弦曲线的缓动(sin(t));3 B; W2 U! n/ e
Exponential:指数曲线的缓动(2^t);9 a% z) J4 Q+ {, O! [9 }# W
Circular:圆形曲线的缓动(sqrt(1-t^2));. v5 X% f! ?  k5 P# M$ u" n% ?
Elastic:指数衰减的正弦曲线缓动;, b* m; N$ Q0 i
Back:超过范围的三次方缓动((s+1)*t^3 - s*t^2);! K+ l- {+ ?' R
Bounce:指数衰减的反弹缓动。
  ?9 P; K- ^) K- n* Yps:以上都是自己的烂翻译,希望各位修正。# a* g* x) n- m6 t) }
, J2 x& ~3 K3 t! a! a8 C$ q
每个效果都分三个缓动方式(方法),分别是:
+ g# Y) M, e% W, X, peaseIn:从0开始加速的缓动;8 M  ?/ Z* N3 I& g" P6 y
easeOut:减速到0的缓动;' x! T1 t. A5 w  F
easeInOut:前半段从0开始加速,后半段减速到0的缓动。
/ s4 N$ [7 s3 ~% ^- l3 F. K! U! w其中Linear是无缓动效果,没有以上效果。
4 Y% k0 d( H  z- T. Y+ ]5 {
# J# Y2 F6 u) `' ?# I* j

8 q& f8 P1 o, \, o  M这是as代码,四个参数分别是:( z2 I2 Q6 _2 {( m; A( q
t: current time(当前时间);
# _7 |& R/ _& _0 G) _b: beginning value(初始值);
" \7 c4 m3 g' {- |' Mc: change in value(变化量);
+ f" ?% g/ w, h' pd: duration(持续时间)。
% X/ |# y5 n) Z: u0 T- Bps:Elastic和Back有其他可选参数,里面都有说明。5 y) n! p, t# N  U
. a9 s3 D  p& \8 h5 K# o9 A
那如何在js中利用这些算法呢?可以看到,虽然是as代码,但里面的程序是可以直接放在js里使用的。
" G0 [& M/ A$ S# h" T, h我们可以定义一个类,把它这部分放在里面:  E; \7 }$ ^; |/ n' C

  w8 o1 Q1 ~( e- T: A  x+ e) B& {
" k/ }# M! b4 E! Z" i! H% H& n& V9 _
[mw_shl_code=javascript,true]var Tween = {" V  e  g* ]( G* J/ v2 e1 \
    Linear: function(t,b,c,d){ return c*t/d + b; },
% _# U; k9 I4 }  |* k8 }7 E* l/ J( N    Quad: {1 p' ~% J' [2 z5 Q& h) \
        easeIn: function(t,b,c,d){" O4 J( O, F* F+ I4 p# U
            return c*(t/=d)*t + b;
% i: b9 M0 J9 H2 \        },' n2 U! A. r& u' w4 q) m  O
        easeOut: function(t,b,c,d){
, h0 _" \0 Q! ?$ j, Z            return -c *(t/=d)*(t-2) + b;8 w% X' F8 M% I3 K! L! I; _
        },
  F: U, V1 E+ u% K        easeInOut: function(t,b,c,d){# s/ P7 ~9 a' m) O
            if ((t/=d/2) < 1) return c/2*t*t + b;
. n  P( y; V* |            return -c/2 * ((--t)*(t-2) - 1) + b;0 U. s# H1 I. V$ U9 U1 u
        }, M# V+ m/ q7 N  E3 J& _* I5 o
    },& `% T0 X$ C% C$ v, {5 O0 ^
    Cubic: {/ e( @) Z0 u& J
        easeIn: function(t,b,c,d){
# a' K' T$ u* S' w            return c*(t/=d)*t*t + b;
* A4 g9 |  x( y# G. _& I        },
3 L. m2 Y! J) t$ w5 Y- `& n# T1 a9 _        easeOut: function(t,b,c,d){
. B5 D' u  v8 i0 h4 e5 A            return c*((t=t/d-1)*t*t + 1) + b;9 s" q$ v& U( F9 D
        },0 t8 \& K: M/ Z5 J9 ?" d+ r; r1 A
        easeInOut: function(t,b,c,d){9 f& ?5 p, w# N& D
            if ((t/=d/2) < 1) return c/2*t*t*t + b;
# L6 `% s- Z) F+ |1 G            return c/2*((t-=2)*t*t + 2) + b;- z  Z( _9 V! Y2 O- _- r
        }$ b7 z4 q' d- {/ I3 C- N8 t$ g, U
    },! z/ W- k8 E8 ^$ e/ L8 w* V0 l
    Quart: {
# r% h2 `* n+ {) j# O        easeIn: function(t,b,c,d){
, e, {- j( G5 t; n6 B( ^' K            return c*(t/=d)*t*t*t + b;
+ ^$ C7 y9 m$ T        },
$ d  U" N. j" V" J3 D: b+ J        easeOut: function(t,b,c,d){$ ]# p9 K9 Y+ x& r0 e' r
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
+ B! N: y! N7 n6 J+ J        },
' d5 R7 s9 e, ?* `4 U! W; C        easeInOut: function(t,b,c,d){7 l% J. p# C5 D+ H; k
            if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
2 R3 o8 D- j5 E/ Z% v( O            return -c/2 * ((t-=2)*t*t*t - 2) + b;' V% v5 q5 o3 x: p( q
        }
* V( |1 j; o$ U% b; e- o* X    },$ e+ m; I1 Z9 X# Y
    Quint: {' F0 N6 I6 B+ ^6 i$ v' c
        easeIn: function(t,b,c,d){
" Q3 d2 K* w* L' P% ?( W* c5 Z            return c*(t/=d)*t*t*t*t + b;- w) K) X4 J* C- V! k3 F6 m
        },! Q- O+ Q! I3 [
        easeOut: function(t,b,c,d){8 L7 j: ^) [+ u
            return c*((t=t/d-1)*t*t*t*t + 1) + b;: ?$ T/ r4 Z! P, M% Y* U
        },- K1 C# ]  C& c" y5 S
        easeInOut: function(t,b,c,d){9 N. N2 b1 H! Z$ W
            if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
$ d, _7 V) x* ^! O! W9 d  p            return c/2*((t-=2)*t*t*t*t + 2) + b;
4 ?; l+ o: w  [6 z- N        }8 P1 P! L% _/ }2 ?
    },, u# O, r$ H7 R8 W' {: {
    Sine: {9 v! j* b1 `- j3 O
        easeIn: function(t,b,c,d){
2 P" s$ H; {& @- I% T+ I9 n' p            return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
) _6 @1 Z# K8 a6 s6 r        },
: Q( ]' n" O! W# P) H0 Z  e        easeOut: function(t,b,c,d){8 `& H& }* f  H) H" s+ g2 T3 t
            return c * Math.sin(t/d * (Math.PI/2)) + b;# N$ i0 ]1 X  z) g0 F
        },
6 i! s7 S/ h( L' G, I. N; U) d" j        easeInOut: function(t,b,c,d){
1 e% N# A" G* I) k  v) ^2 o1 A7 R            return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
" H3 a1 G! i: P! h3 E1 h        }
4 q# S0 B7 E! L% L, g5 y    },
" w3 x4 y9 W5 }+ V9 N# L    Expo: {& U9 n# j1 w  d. `
        easeIn: function(t,b,c,d){
9 Q( q$ N) x: C' _5 K            return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
4 C, r& |0 s) o! C) O: @3 ^        },& Y: k9 R, ?" K- |! Q) e
        easeOut: function(t,b,c,d){
3 l8 [4 r% L5 r  d% Y; Q1 j& U            return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;/ _+ b3 t& F/ ]! ]! v& L
        },
2 T# V. R# L5 t3 U3 A! \- D        easeInOut: function(t,b,c,d){
$ I1 _) f' N' N" q! `0 [            if (t==0) return b;1 c; Z  X2 i! b& O, S+ X3 d3 `
            if (t==d) return b+c;
$ a, C4 y0 ?% v: p            if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;: }+ \- M  r/ {' V# T; l( ~
            return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;! p& C/ U3 C3 L. G
        }) m8 y, Y. s- y
    },$ x* D/ E7 H& O
    Circ: {
7 I( H: u5 j2 N4 d, ^4 G        easeIn: function(t,b,c,d){
3 C6 }- _4 L  s% I& c$ ]% ]7 p            return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
! v- v/ V1 Q' _4 g: K% v+ T        },3 I1 K; t/ t6 O6 r1 j( f+ @  p9 K
        easeOut: function(t,b,c,d){
1 j( J2 Q, c& ^3 g6 n            return c * Math.sqrt(1 - (t=t/d-1)*t) + b;  h; b! M3 \0 Y
        },
7 [% U0 ^5 @/ j# J9 t' u% R        easeInOut: function(t,b,c,d){- D/ F7 N% h8 [; C. q- K, t0 e
            if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;+ q$ i" G7 _! Q  t. Z1 b$ W: }5 h  a- n
            return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
5 c. H7 `- ~3 }* i# o1 M        }
8 F6 J8 [1 d2 @6 x7 p% e/ ^$ Z    },
$ M1 e( `9 ~1 N1 i0 h, b    Elastic: {
. f0 R; a, P& o- p$ ~9 S6 w* [        easeIn: function(t,b,c,d,a,p){
6 ~) p  p, ^3 X( a2 ]# ?  I9 |. d            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;9 z4 _$ P8 d& }3 I  a
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
: }3 y# G$ _% q: D; Q            else var s = p/(2*Math.PI) * Math.asin (c/a);
& z) D( q+ t3 ?9 E" {            return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
8 }% `& G& S9 l3 B$ a        },- b# c- r4 w% A, X
        easeOut: function(t,b,c,d,a,p){8 H" C; c, L) z, m
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
/ J7 @4 F" m1 Z- o) _4 h' O  ]/ q            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }* n7 E6 L! Z* d/ |; _* N
            else var s = p/(2*Math.PI) * Math.asin (c/a);
' t+ n6 H3 Z2 v  F! f  ?% I9 C            return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
8 v0 h: K- w$ v        }," q. j' W& X' s5 p% G
        easeInOut: function(t,b,c,d,a,p){2 W9 y# u8 r# g. p5 m5 v
            if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
0 |* x+ b* k3 d& ^' C" r* w% O4 c" d            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
" M0 u! B5 N4 r* A            else var s = p/(2*Math.PI) * Math.asin (c/a);
2 `) n1 @8 G# R) r4 S5 X' E            if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;0 u5 q  U+ l3 O2 P0 e) R9 H
            return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;" c% {: U/ e; N1 y1 q4 ~$ X" ]. X
        }
# O% d: E3 K9 m" ~6 O7 ]    },2 Q! e( K& b& O$ `
    Back: {# G8 i' e% j) t- s  M$ C
        easeIn: function(t,b,c,d,s){2 @" u6 F5 Q* M; G
            if (s == undefined) s = 1.70158;) p- _$ {3 G' P
            return c*(t/=d)*t*((s+1)*t - s) + b;
6 S  D! k5 l/ T1 ~        },3 t9 [& Z9 J/ f
        easeOut: function(t,b,c,d,s){
  b  e% x& B- ^* I# v            if (s == undefined) s = 1.70158;
4 M$ t0 L) g& p            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
' W) a9 c+ \$ k/ R        },, m1 [  Q- O* `' ?7 A( B- L
        easeInOut: function(t,b,c,d,s){
" m7 s& S% h% ?            if (s == undefined) s = 1.70158; ( X$ ~' d8 {: j( {& f! G1 T
            if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
4 {5 J6 ?0 Y& F; n" d            return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;: ]# w$ t" t) w) B! a
        }; T3 |8 r5 Y, C( e/ v! L
    },
' [* a+ `. r; h/ H( Q    Bounce: {5 H! q) v3 ?& x: b
        easeIn: function(t,b,c,d){
- T" C0 T/ g) n" s: Z            return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
& D3 {; y" B: V4 @        },
, N2 `: h5 p! M7 ]# x        easeOut: function(t,b,c,d){
) w/ X$ I/ S, i( G            if ((t/=d) < (1/2.75)) {& L, E4 K( L5 a" V- t
                return c*(7.5625*t*t) + b;, ?* Z  [' e# n# H
            } else if (t < (2/2.75)) {
* z1 m) ~) F# _5 h* E( K                return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
- z4 a( x! P  r, V. V            } else if (t < (2.5/2.75)) {
# Y% R8 ?& O& F5 E% p$ u                return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
$ Z2 z3 _9 n& }, Z2 y  s) X            } else {
; B: }( _( X! t' Y* q                return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
) D% k1 q' u# z9 o3 I2 k( H            }
, g( z; e! @; v) _        },: p8 e3 M$ I* k6 ^3 a
        easeInOut: function(t,b,c,d){; X1 ^4 y4 ^' `
            if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
. B# w; i8 [" S" G) w5 f            else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;' @8 m4 d: B0 E- W; V% Q3 e
        }& B( b( E6 p+ @4 D# Y
    }. r: ^1 v$ j* K. w; [
}[/mw_shl_code]
3 Q8 i7 E/ Q( L" H
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了