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

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

admin 楼主

2020-2-6 16:28:24

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

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

x

9 J- w0 d6 z0 ]" C% H4 d" i$ p0 u+ {* X# S; T0 U8 T# p3 z
2 B4 _+ G. M8 c3 L
动画库tween.js
% `% R7 O* m. h! x( M" J& f% V- n4 R  O* T. z6 S, z
相关资料 http://robertpenner.com/easing/
" V( R# C+ x( w6 n8 T: u4 h% [) C* P8 {" q8 S

, y. G6 g. T2 J( P: ^Linear:无缓动效果;6 S% n" w# x* i
Quadratic:二次方的缓动(t^2);; c% r1 M, N" c9 ]1 l: |3 c
Cubic:三次方的缓动(t^3);
* K  K7 {$ k1 P2 gQuartic:四次方的缓动(t^4);
$ C/ [/ r) A2 s7 K, j- ^" g. rQuintic:五次方的缓动(t^5);& Z3 p0 g9 W. o: s/ K" \, A4 ~  T
Sinusoidal:正弦曲线的缓动(sin(t));
7 C7 e1 e! l9 B: y( ^Exponential:指数曲线的缓动(2^t);
' {4 K% X* r4 x+ B2 ?; nCircular:圆形曲线的缓动(sqrt(1-t^2));6 v4 @$ ?, j- f3 ?2 j
Elastic:指数衰减的正弦曲线缓动;
9 w3 A( \3 j) A: fBack:超过范围的三次方缓动((s+1)*t^3 - s*t^2);
+ W) t" `) K7 kBounce:指数衰减的反弹缓动。7 s! U0 z* ^7 S; x5 n, `* m8 \! F9 U
ps:以上都是自己的烂翻译,希望各位修正。. L+ A) s: ], K( A$ B0 Z

& `$ J* i% G2 o2 ]1 q* `' v2 N每个效果都分三个缓动方式(方法),分别是:, N& i' P' F" H) ]' H, N; G/ {
easeIn:从0开始加速的缓动;
" w$ l/ T" X3 @* Z( H9 e, YeaseOut:减速到0的缓动;
; r; X( t* u6 |) neaseInOut:前半段从0开始加速,后半段减速到0的缓动。
, t; Z$ R: i) W其中Linear是无缓动效果,没有以上效果。! \) ]6 x. Y( m0 P0 ^
4 `/ a$ W, e$ a4 U( n' D

1 z/ G1 S/ |6 m0 {- F这是as代码,四个参数分别是:8 N3 r3 u9 p& c# f$ X
t: current time(当前时间);
. a8 M3 Y7 F+ Wb: beginning value(初始值);/ U  b2 T1 v4 p. J  A; [
c: change in value(变化量);5 [* e9 R) O: M7 j
d: duration(持续时间)。2 ]& {2 k1 X+ ]9 }
ps:Elastic和Back有其他可选参数,里面都有说明。& ]6 z  K- V3 q# w

3 b! l" ^- N& N$ T3 e2 F, |! I那如何在js中利用这些算法呢?可以看到,虽然是as代码,但里面的程序是可以直接放在js里使用的。* S6 |' B- n1 G* @7 o& O/ {
我们可以定义一个类,把它这部分放在里面:
( _2 I1 p" q$ ^3 x$ \2 I$ r
6 w- \9 `  R: |! Q: o3 `9 U. x' Q
' }8 w/ O9 [; w0 [/ P
6 ^# Y2 M, u7 Y! c: k. @, R9 u
[mw_shl_code=javascript,true]var Tween = {& C& t6 M! ^9 }
    Linear: function(t,b,c,d){ return c*t/d + b; },* U. o4 \- D" q$ H1 O1 X
    Quad: {. j1 L. e/ W8 @" e# ^  ]; N$ q
        easeIn: function(t,b,c,d){# f% s9 o$ y! N# l% V1 X* c
            return c*(t/=d)*t + b;
1 N* g  P4 v4 v$ H8 ?: s        },1 q2 s( @# Z/ v; |* ^+ A
        easeOut: function(t,b,c,d){) l% G+ J8 H9 l8 a  \6 z) B5 @# T
            return -c *(t/=d)*(t-2) + b;
1 |, p, t8 k9 s) Q$ F        },
( i: S$ E+ F, D5 u. L        easeInOut: function(t,b,c,d){
0 Y3 v8 d3 K/ Q* _* B4 O. h            if ((t/=d/2) < 1) return c/2*t*t + b;
; R' C/ M. ]) W; F8 L' K, D3 g            return -c/2 * ((--t)*(t-2) - 1) + b;
- f9 W" l1 P" j; c8 Z4 Y2 H        }
, S3 |* h+ @$ M# j- D    },
$ c/ G0 ], Q- S. u    Cubic: {
# [" ^% F4 h$ U) i        easeIn: function(t,b,c,d){
7 W3 ^: h1 @0 d- M7 @( p            return c*(t/=d)*t*t + b;
% B  R" b0 `: n* i+ d! c        },, l+ K9 q5 [1 x7 @3 _  g. g1 _
        easeOut: function(t,b,c,d){
" [6 B' ]& L0 b( y& z$ D            return c*((t=t/d-1)*t*t + 1) + b;* i: w3 h1 R" |% i: X
        },
6 @6 r; e2 W! T. Z6 K" c        easeInOut: function(t,b,c,d){6 o$ z1 ]5 z! M! D# F4 e' H6 u. s
            if ((t/=d/2) < 1) return c/2*t*t*t + b;: p; H  T, _/ x& F; h
            return c/2*((t-=2)*t*t + 2) + b;
' \3 `7 b1 l. [" B        }
: v3 b6 f9 ^1 \" ?6 K0 f' d# X- E9 J5 ~    },1 V5 V$ M3 B% O6 c3 J. ~
    Quart: {
& Y; K9 t  K/ J. g  T5 H        easeIn: function(t,b,c,d){
# x0 Q. R' r" e) b2 b: p& E/ u$ }            return c*(t/=d)*t*t*t + b;5 E+ o" `. C$ v/ M- @) ]8 R" E
        },% t! [, |0 O+ U
        easeOut: function(t,b,c,d){
0 t0 [+ ^% _% e' U! h% d            return -c * ((t=t/d-1)*t*t*t - 1) + b;$ h9 |4 H- y. T  M% D, a8 I. L1 X
        },' s9 \; O8 h, z$ T2 {& ~3 e1 Q% q
        easeInOut: function(t,b,c,d){
: t6 y# ]7 N0 C/ \            if ((t/=d/2) < 1) return c/2*t*t*t*t + b;8 N, N/ ~  n+ Y8 \
            return -c/2 * ((t-=2)*t*t*t - 2) + b;' a2 j& S! _) l) z! {1 W
        }
3 S3 y4 n! c! T. j3 w7 O    },3 _  s! [# U; r- ]4 j/ I
    Quint: {9 f; j2 V1 a. n& Z. N) J
        easeIn: function(t,b,c,d){
$ A) \0 I1 @6 ^; f9 p% B- J            return c*(t/=d)*t*t*t*t + b;
- @0 G. E- V  I        },# s5 n3 o, K, K& D; d4 S
        easeOut: function(t,b,c,d){3 Z( g& \3 @# _# q
            return c*((t=t/d-1)*t*t*t*t + 1) + b;
/ V/ [8 O- b: v! b8 Z        },2 p6 h! c4 K- t) G
        easeInOut: function(t,b,c,d){
4 z$ L8 D  f; X3 o- Y! D  J, m; d            if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;# N" `9 m  c1 ]8 x+ H* {8 L1 g
            return c/2*((t-=2)*t*t*t*t + 2) + b;8 h# p' F$ y0 a/ g" `$ j" {& |
        }: @8 ]7 |- D' q  m) }  X
    },
( d2 f8 r0 L, J3 p5 H& T    Sine: {
% F# A8 p- @* P) a' g        easeIn: function(t,b,c,d){
  X, [/ G0 S# J. X) ~1 `            return -c * Math.cos(t/d * (Math.PI/2)) + c + b;; ]2 F1 n; t# ~
        },
, C  C0 W/ T& a: S: S        easeOut: function(t,b,c,d){9 d4 r7 d1 s+ W% P* D# f  d. p- \
            return c * Math.sin(t/d * (Math.PI/2)) + b;
) P- \$ R' r- I  A2 O  Z        },
; z+ f* e3 S0 }        easeInOut: function(t,b,c,d){
$ {/ v6 T1 ]" e            return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;- C, q# E4 b1 E2 u0 [6 Z, e5 ]# B% V
        }& c- M: Y# i+ K& f2 Y9 d
    },1 t2 T0 w! O/ K2 c0 j) f
    Expo: {- U  c: d7 @% Z1 ^3 y5 H
        easeIn: function(t,b,c,d){
% n5 S& ~8 V9 V            return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
' a5 m3 e0 e( q2 J        },
6 a+ k* W& P/ D" Q' W        easeOut: function(t,b,c,d){
  `, K7 y8 n2 F6 M            return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;+ n% P3 H! W: \7 f. {. r3 _
        },
$ K0 j$ f. a& ?  i+ b        easeInOut: function(t,b,c,d){
) o: f# T/ z5 y2 M( X            if (t==0) return b;9 P( J  j4 P0 k
            if (t==d) return b+c;% \  r1 o+ U% a
            if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;. V6 P8 w& K1 O/ ~3 c* k4 j
            return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;  F4 D: A" Y' q
        }
; e1 t4 Q) q7 l, Q& b    },) d+ E2 W. I4 v6 B; I5 ]
    Circ: {
* Q- h0 Z9 [% O# @! u5 N        easeIn: function(t,b,c,d){
5 i( W6 i& [7 A0 O1 z            return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
- P) s) W( c9 @1 I        },
$ H0 y" f# ~) R. B4 Q5 R+ ^9 @        easeOut: function(t,b,c,d){
) h6 K, T  n% K4 p" L' @" u            return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
, S1 A& R" S' _3 Q- f        },0 j/ g8 [" _; S. r. ?) x$ u. v3 ?( w
        easeInOut: function(t,b,c,d){% _& r: C6 N$ r2 k" n9 k
            if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;! c. b# N( Q% P% U
            return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;: ~$ H) b0 T3 o$ Y: H6 z
        }
3 f) S- ?6 }: N/ ~' X4 V    },# R4 J! Z0 E7 ]" \0 h) x' e
    Elastic: {
0 C1 u! z6 R. L, q+ Q* L, G6 h        easeIn: function(t,b,c,d,a,p){, K0 u! }( e1 r. K
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
! z: c0 T9 h' l9 {6 |6 X: [: Y            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
5 ^; Q4 e7 d) V6 R' v& {            else var s = p/(2*Math.PI) * Math.asin (c/a);% J7 V# ?* B; x2 R$ M) a
            return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;0 l, ~8 K' \" b# |( S5 _
        },
3 m4 D3 T5 ?1 r8 n        easeOut: function(t,b,c,d,a,p){
6 I& ?1 Q; H/ E  h2 p6 D/ x            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
: s9 m4 [6 {, Y, r. w# |" J            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
) z; K8 p3 w: T$ f% a& V            else var s = p/(2*Math.PI) * Math.asin (c/a);
# Y! S9 n5 i6 f& o% S9 n0 K9 n            return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);" h" e9 y3 C2 X
        },
; r# }7 |2 L/ G! |        easeInOut: function(t,b,c,d,a,p){" T, A6 E+ s- ]" R! ?+ k
            if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);# u' \. C: h; f7 a
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
6 O( y; m! c" X9 a9 W& [            else var s = p/(2*Math.PI) * Math.asin (c/a);
! K2 k2 c* M) |- W5 n% M5 X            if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;! R- g/ q9 M" t8 M# q% G: X* v% r# r
            return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;* @6 y: G$ f4 ?8 g
        }
5 y4 v3 G+ S+ @* T8 }# Z; p  ~    },
+ o& [* b! b4 O/ \1 K% @    Back: {
/ W& M9 l* z' Q) Y7 z        easeIn: function(t,b,c,d,s){
8 V. L( x4 [& S6 G            if (s == undefined) s = 1.70158;
3 ^' b- m/ Y! ^1 }% B            return c*(t/=d)*t*((s+1)*t - s) + b;4 A- w) _1 S) i+ f+ W
        },+ E6 X7 f: V$ h% i1 X) _
        easeOut: function(t,b,c,d,s){
7 e7 S5 h7 Q6 n            if (s == undefined) s = 1.70158;7 `& ~3 H; f# d" [6 F- D0 N
            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;3 V$ `( H: [4 f( [
        },
% C( U9 Z% h6 \3 g4 I        easeInOut: function(t,b,c,d,s){% k/ v. O' |2 X! Q9 W) d
            if (s == undefined) s = 1.70158;
7 v, Q" l( b* t+ k& P            if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;2 q3 O. b8 r! k1 b; x2 F. i  N" r
            return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;0 Q- `- r( G& c9 F
        }9 t8 ^( ^# Z. X1 [! ?
    },
" Z! H' n& Y% w9 L9 D2 F3 g$ w    Bounce: {
  Z  f2 Z8 T$ l& a3 _4 C5 S        easeIn: function(t,b,c,d){
, V- W) A  p% s            return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
" N" n! h0 Z) z        },
  Y3 G1 ~2 S  J" _" ~# T2 @        easeOut: function(t,b,c,d){8 Q- L5 [' A. Z  u! D, f! M
            if ((t/=d) < (1/2.75)) {
: v$ @( p* }- R3 f  E3 o$ D                return c*(7.5625*t*t) + b;
3 _8 a$ c5 r: W% D            } else if (t < (2/2.75)) {
% X9 u2 ^3 D& R  V9 G& {                return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
; }2 T( ~! [, Q+ h# ^1 e( Y8 K) E( e! C            } else if (t < (2.5/2.75)) {
: G4 h) [9 F( ?( ?4 K+ N8 [                return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
) i) N0 m$ j& Q3 U2 S' ]0 ~            } else {4 }5 A# X* Q, }& Z& p( i! F! x
                return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;; @& [! q8 A5 |( O2 h
            }
2 d3 _6 E2 T. C/ I. V        },
. }; J* F) E4 B6 b- A        easeInOut: function(t,b,c,d){0 x' {2 c$ H) p9 R! k% U
            if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
. w- e- B: _7 E( f- h! n            else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;1 c3 V5 I& T, H1 n8 P
        }5 I4 l1 z. ]0 X: e8 A5 ?: E
    }# G3 _3 W: V9 D# X
}[/mw_shl_code]
' g3 X/ X' W/ l  l. s
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了