Home > Developer > JavaScript
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title></title> <style>#taxiway{width:800px;Height:100px;background:#E8E8EF;position:relative; }#move{position:Absolute; Left:0;width:100px;Height:100px;background:#a9ea00; } </style></Head><Body> <DivID= "Taxiway"> <DivID= "Move"></Div> </Div> <Script> functionEaseoutbounce (POS) {if(POS)< (1/2.75)) { return (7.5625*POS*POS); } Else if(POS< (2/2.75)) { return (7.5625*(POS-=(1.5/2.75)) *pos + 0.75); } Else if(POS< (2.5/2.75)) { return (7.5625*(POS-=(2.25/2.75)) *pos + 0.9375); } Else { return (7.5625*(POS-=(2.625/2.75)) *pos + 0.984375); } } varEl=document.getElementById ('Move') varParent=document.getElementById ('Taxiway') varDistance=Parent.offsetwidth-El.offsetwidthvarbegin=parsefloat (window.getComputedStyle (EL,NULL). left)varEnd=begin+Distancevarfps= - varinterval= + /fpsvarDuration= - var Times=Duration/ + *fpsvarStep=Distance/Times El.onclick= function() { varBeginTime= NewDatevarID=SetInterval (function() { varT= NewDate-BeginTimeif(t>=duration) {El.style.left=End+ 'px'clearinterval (ID)}Else { varper=T/Duration El.style.left=begin+easeoutbounce (PER)*Distance+ 'px'}} , Interval)}</Script></Body></HTML>
EaseIn
Linear (Easenone)
In indicates acceleration
Out means deceleration.
InOut means accelerating to the halfway and starting to slow down.To differentiate between an exponent or an open root in an implementation way
Sine represents the implementation of trigonometric functions
Quad is two times a square
Cubic is three times a square
Quart is four times a square
Quint is five times a square
Cire using Math.sqit with square root
Expo use open square root Math.pow
Elastic is a primary spring effect that combines trigonometric functions with the opening of the third square root
Back is a fallback effect that is calculated using a 1.70158 constant
Bounce is an advanced spring effect
JavaScript Framework Design Chapter 14th animation engine
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
