Atlas 1/17

Text 8862 words 284 Reading












cubic-bezier.com






Ball drop effect



















































Wolfram | Alpha







tool

























The animation curve




















































Uniformly accelerated motion
Friction slows motion uniformly
Horizontal cast animation



Poking me poking me













































Some animation curves



















Poking me poking me



// Part of the code display

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;

        }

    },

...

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16






var ball = document.getElementById("ball")

var elasticFall = function() {

    var start = 0,

    beginingValue = 0,

    changeValue = 400,

    during = 100;

    var _run= function() {

        start++;

        var top = Tween.Elastic.easeOut(start, beginingValue, changeValue, during);

        ball.style.webkitTransform = "translateY("+top+"px)";

        if(start < during) requestAnimationFrame(_run);

    }

    _run();

};

elasticFall();

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15



here






























here






jstween
GreenSock













// jstween

JT.fromTo($target, 2, 

{

    x:400      

}, {

    x:0,

    ease: JT.Elastic.Out,

    onEnd: function (n) {

        console.log("animate end.")

    }

});

 

// Through GreenSock

TweenLite.fromTo($target, 2, 

{

    x: '400px'

}, 

{

    x: '0', 

Ease: Elastic. EaseOut. Config (0.5, 0.4),

    onComplete:function(){

        console.log("animate end.")

    }

}

);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25



Online adjust parameter preview effect page
















/ / https://github.com/terkel/mathsass introduced function library, realize the sine, cosine, such as mathematical functions

@import "node_modules/mathsass/dist/math";

 

// write the spring curve function

@function elasticAniFn($t) {

@ return - 0.5 * pow (exp (1), (6 * $t)) * (2 * pow (exp (1), (6 * $t)) + sin (12 * $t) + 2 * cos (12 * $t))

}

 

// Write the object displacement as a function of time

/ / $b: initial value

/ / $c: variation

//$p: % progress of the current movement

$p = $p%; $p = $p%; $p = $p%

@function aniFn($b, $c, $p) {

    @return $b + $p * ($c - $b);

}

 

// Declare animation

// The resulting CSS:

//@keyframes moveAni {

{/ / 0%

//  transform: translateX(400px);

/ /}

{/ / 1%

/ / the transform: translateX (396.54493 px);

/ /}

{/ / 2%

/ / the transform: translateX (386.76446 px);

/ /}

{/ / 3%

/ / the transform: translateX (371.53953 px);

/ /}

@keyframes moveAni {

    @for $i from 0 through 100 {

        {$i}% { 

            transform:translateX(aniFn(400px, 0, elasticAniFn($i / 100)));

        }

    }

}

 

// Use animation

.box {

  animation: 1s moveAni linear;

  transform: rotate

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27









Stylie
























































GreenSock
jstween
Animation function
Animation function
Stylie
























How do you make your animations more natural