js动画效果算法

最新推荐文章于 2023-05-07 20:19:56 发布
最新推荐文章于 2023-05-07 20:19:56 发布
阅读量549 收藏
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/openoschina/blog/3017131
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

 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;
            }
        },
        Cubic:{
            easeIn:function (t, b, c, d) {
                return c * (t /= d) * t * t + b;
            },
            easeOut:function (t, b, c, d) {
                return c * ((t = t / d - 1) * t * t + 1) + b;
            },
            easeInOut:function (t, b, c, d) {
                if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
                return c / 2 * ((t -= 2) * t * t + 2) + b;
            }
        },
        Quart:{
            easeIn:function (t, b, c, d) {
                return c * (t /= d) * t * t * t + b;
            },
            easeOut:function (t, b, c, d) {
                return -c * ((t = t / d - 1) * t * t * t - 1) + b;
            },
            easeInOut:function (t, b, c, d) {
                if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
                return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
            }
        },
        Quint:{
            easeIn:function (t, b, c, d) {
                return c * (t /= d) * t * t * t * t + b;
            },
            easeOut:function (t, b, c, d) {
                return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
            },
            easeInOut:function (t, b, c, d) {
                if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
                return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
            }
        },
        Sine:{
            easeIn:function (t, b, c, d) {
                return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
            },
            easeOut:function (t, b, c, d) {
                return c * Math.sin(t / d * (Math.PI / 2)) + b;
            },
            easeInOut:function (t, b, c, d) {
                return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
            }
        },
        Expo:{
            easeIn:function (t, b, c, d) {
                return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
            },
            easeOut:function (t, b, c, d) {
                return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
            },
            easeInOut:function (t, b, c, d) {
                if (t == 0) return b;
                if (t == d) return b + c;
                if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
                return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
            }
        },
        Circ:{
            easeIn:function (t, b, c, d) {
                return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
            },
            easeOut:function (t, b, c, d) {
                return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
            },
            easeInOut:function (t, b, c, d) {
                if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
                return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
            }
        },
        Elastic:{
            easeIn:function (t, b, c, d, a, p) {
                if (t == 0) return b;
                if ((t /= d) == 1) return b + c;
                if (!p) p = d * .3;
                if (!a || a < Math.abs(c)) {
                    a = c;
                    var s = p / 4;
                }
                else var s = p / (2 * Math.PI) * Math.asin(c / a);
                return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            },
            easeOut:function (t, b, c, d, a, p) {
                if (t == 0) return b;
                if ((t /= d) == 1) return b + c;
                if (!p) p = d * .3;
                if (!a || a < Math.abs(c)) {
                    a = c;
                    var s = p / 4;
                }
                else var s = p / (2 * Math.PI) * Math.asin(c / a);
                return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
            },
            easeInOut:function (t, b, c, d, a, p) {
                if (t == 0) return b;
                if ((t /= d / 2) == 2) return b + c;
                if (!p) p = d * (.3 * 1.5);
                if (!a || a < Math.abs(c)) {
                    a = c;
                    var s = p / 4;
                }
                else var s = p / (2 * Math.PI) * Math.asin(c / a);
                if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
                return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
            }
        },
        Back:{
            easeIn:function (t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                return c * (t /= d) * t * ((s + 1) * t - s) + b;
            },
            easeOut:function (t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
            },
            easeInOut:function (t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
                return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
            }
        },
        Bounce:{
            easeIn:function (t, b, c, d) {
                return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
            },
            easeOut:function (t, b, c, d) {
                if ((t /= d) < (1 / 2.75)) {
                    return c * (7.5625 * t * t) + b;
                } else if (t < (2 / 2.75)) {
                    return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
                } else if (t < (2.5 / 2.75)) {
                    return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
                } else {
                    return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
                }
            },
            easeInOut:function (t, b, c, d) {
                if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
                else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
            }
        }
    }
  
  
  /*
    Linear：无缓动效果；
    Quadratic：二次方的缓动（t^2）； Cubic：三次方的缓动（t^3）； Quartic：四次方的缓动（t^4）； Quintic：五次方的缓动（t^5）；
    Sinusoidal：正弦曲线的缓动（sin(t)）； Exponential：指数曲线的缓动（2^t）；
    Circular：圆形曲线的缓动（sqrt(1-t^2)）； Elastic：指数衰减的正弦曲线缓动；
    Back：超过范围的三次方缓动（(s+1)*t^3 - s*t^2）； Bounce：指数衰减的反弹缓动。
    ps：以上都是自己的烂翻译，希望各位修正。 
    每个效果都分三个缓动方式（方法），分别是：
    easeIn：从0开始加速的缓动；
    easeOut：减速到0的缓动；
    easeInOut：前半段从0开始加速，后半段减速到0的缓动。
    其中Linear是无缓动效果，没有以上效果
  
  
   t: current time（当前时间）；
    b: beginning value（初始值）；
    c: change in value（变化量）；
    d: duration（持续时间）。
    ps：Elastic和Back有其他可选参数，里面都有说明。
  
  
    */
   
    //Tween中的方法接受4个参数t,b,c,d 。t为初始时间 b、c、d三个参数（即初始值，变化量，持续时间）。返回值为当前位置
    //t => time(初始记步次数)  b => begin(初始位置)   c => change(变化量)   d => duration(持续次数)
    /*
     先通过上面的坐标实例说一下算法原理：
 
     x轴是时间，y轴是当前值，b是y轴的初始值，x轴的初始值是0，t是当前时间。当t（x轴）逐渐增加到达d时，当前值（y轴）会到达目标值（b+c）。
     想详细理解的话可以找资料看看吧（貌似跟数学关系比较大）。
 
     下面就介绍如何使用这个Tween了，首先b、c、d三个参数（即初始值，变化量，持续时间）在缓动开始前，是需要先确定好的。
     举一个简单的例子，一个div要向右缓动，left初始值是50，那么b就是50，要向右移动100，那c就是100，如果知道的是目标值，例如要向右移动到150，那就把目标值150减初始值b就是变化量c了。
     至于d的设置就比较灵活，只要符合t是从0向d递增（或递减）就可以了。
 
     d跟步长配合使用来设置持续时间，例如d设置为100，如果设置步长是1，那么从0到100就有100步，即分100次来完成这个过程，步数越多那么持续时间就越长。
     至于t的变化相当于时间的变化，一般是均匀变化的，每次变化都增加一个步长，当t从0递增（或递减）到d时，缓动就结束了。
 
     要注意的是t是从0开始的，设置步长时必须确定t确实能到达d，如果上面的步长是3，那么t就永远都到不了d了。更好的处理是当t等于或超过d之后，就停止定时器并设置当前值为目标值。
     */

 

2.个插件 tween.js可生成平滑动画效果的js动画库

 

http://www.htmleaf.com/jQuery/Layout-Interface/201501271284.html

 

 

 

3.snabbt 动画效果插件

 

 

2个插件配合可以实现现在dsp里面的任何动画效果，不用自己写。爽歪歪

 

 

使用方法

 

/**
 参数列表
  
t: current time(当前时间)
b: beginning value(初始值)
c: change in value(变化量//不懂看下边的解释)
d: duration(持续时间)
  
*/ 
var Tween = { 
    Quad: { 
        easeOut: function(t,b,c,d){ 
            return -c *(t/=d)*(t-2) + b; 
        } 
    } 
} 
   
var b=50,c=100,d=100,t=0,speed=1; //speed 步长 
function Run(){ 
    div.style.left = Math.ceil(Tween.Quad.easeOut(t,b,c,d)) + "px"; 
    if(t<d){ t += speed; setTimeout(Run, 10); } 
} 
Run();

 

转载于:https://my.oschina.net/openoschina/blog/3017131

weixin_33755649
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现动画效果
charlene0824的博客
11-25 4702
用js实现动画效果的主要思想是利用setInterval()函数.此函数可按照指定的周期（以毫秒计）来调用函数或表达式，并且该方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。 1.单个元素匀速运动 以匀速水平方向运动的元素为例，该方法传入三个参数，分别为要移动元素，要移动到的目标
js缓动动画效果
nuomi_w的博客
12-19 190
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl
算法 动画算法 算法动画 动画原理——总体概览图
06-19 2201
动画算法一 https://visualgo.net/en 动画算法二 https://www.cs.usfca.edu/~galles/visualization/Algorithms.html 动画算法三 http://www.donghuasuanfa.com/
【源码】带有动画的路径规划算法合集
weixin_42825609的博客
11-20 1292
p=3660 (访问密码: 3660)
30种图像动画特效算法（C#多线程版）（下）
weixin_33725515的博客
01-06 223
这是截屏动画效果： 这是最后10种特效： #region旋转放大 //原理：使用Graphics的RotateTransform()方法进行坐标变换 privatevoidAnimator21() { constfloatanglePer=6;//每...
JavaScript动画特效——Canvas粒子动画
学而不思则忘
09-15 2075
这次，将制作飘雪的效果，如果用CSS动画样式来做的话，可以想象，那是有多么难。所以就用JavaScript来制作。 Canvas官方教程，很详细：http://canvas.migong.org/category/canvas-animation 要使用Canvas，则需要在HTML中插入相应的DOM结构： <canvas id="myCanvas" width="1000" height=...
骨骼蒙皮动画算法（Linear Blending Skinning，线性混合蒙皮）
Xu_Haocan的博客
10-06 3372
https://www.cnblogs.com/shushen/p/5987280.html
javascript动画算法实例分析
10-23
JavaScript动画算法是实现网页动态效果的关键技术之一，它利用JavaScript编程语言来控制元素在页面上的运动轨迹、速度和样式变化，从而创造出丰富的视觉体验。在JavaScript中，动画通常是通过不断改变元素的位置、...
JavaScript排序算法动画演示效果的实现方法
10-21
下面小编就为大家带来一篇JavaScript排序算法动画演示效果的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
利用JS实现文字的聚合动画效果
11-28
在本文中，我们将探讨如何利用JavaScript（JS）来实现一种文字的聚合动画效果。这种效果是通过将一个容器划分为多个小块，然后利用CSS3的动画特性来达到视觉上的聚合与分散。以下是对实现这一效果的关键技术点的详细...
cascadiaJS:动画算法-CascadiaJS
05-22
2015年流利会议演讲 动画算法-激活用户界面的简单公式 简介：动画不仅使事情看起来很酷，而且还提供了上下文和其他细节。 动画为我们提供了交流的三维空间：时间。 现实世界并非以完全线性的方式移动，当我们看到发生的事情时，就会感到尴尬和不自然。 通过运动，沉闷和令人愉悦之间的区别通常归结为数学问题。 本讲座将引导您逐步了解动画设计的基本原理以及可用于创建可靠动画的简单公式。 通过对插值，缓动和排序的快速介绍，您将学习如何仅需少量代码就可以创建很多效果。 我们还将讨论使用CSS和JS以及当前浏览器功能时的性能注意事项。
发现一个有趣的开源项目：通过动画教你学习算法
程宇寒
03-18 440
学算法学累了吧？被算法虐的不轻吧？反正，我已经被虐的遍体鳞伤。所以今天呢，我给大家介绍一个开源项目，这个开源项目给我们提供了一个通过视图动画学习算法的环境。下面来一览究竟。 先上一张可视化学习算法的图片吧，让你们感受下 这个开源项目已经斩获了很多 star了，如下： 地址：https://github.com/algorithm-visualizer/algorithm-visual...
基于动画图解常用的机器学习算法
lsxxx2011的专栏
12-16 767
每当提到机器学习，大家总是被其中的各种各样的算法和方法搞晕，觉得无从下手。确实，机器学习的各种套路确实不少，但是如果掌握了正确的路径和方法，其实还是有迹可循的，这里我推荐...
动画图解：九大经典排序算法详解（算法宝App）
最新发布
caihuadi的专栏
05-07 374
使用动画方法详细讲解九大经典排序算法。在算法宝App中有更多热门面试算法，是程序员学习/面试有力帮手。
JavaScript排序算法动画演示-----（含完整代码）
qq_44859233的博客
07-14 1271
最近在搞一个好玩的东西，算法、前端学习两不误，哈哈，不废话，让大家看看效果 虽然有点不好看，css还需要优化一下，但是功能都齐全了，下面来看看代码 index部分： <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>排序算法动画演示</title> <link rel="stylesheet" href="css/style.cs
动画讲算法，终于来了！
算法channel
11-14 622
Python与算法社区已原创430篇，干货满满值得星标010203三步加星标没有看起来的轻松，只有上下求索的艰辛，实话讲，我从下午4点到现在，一口饭没吃，一口水没喝，只为了尽快做出，我的...
用JavaScript实现排序算法动画【第二期】插入排序
邓占勇的博客
03-24 745
算法概述 插入排序（Insertion sort）是一种简单直观且稳定的排序算法。 将数组的第一个数认为是有序数组，从后往前（从前往后）扫描该有序数组，把数组中其余n-1个数，根据数值的大小，插入到有序数组中，直至数组中的所有数有序排列为止。这样的话，n个元素需要进行n-1趟排序！ 主要参数 平均时间复杂度 最好情况 最坏情况 空间复杂度 排序方式 稳定性 ...
Tween.js各类原生动画运动缓动算法
macleer的博客
02-10 2626
Linear：线性匀速运动效果；Quadratic：二次方的缓动（t^2）；Cubic：三次方的缓动（t^3）；Quartic：四次方的缓动（t^4）；Quintic：五次方的缓动（t^5）；Sinusoidal：正弦曲线的缓动（sin(t)）；Exponential：指数曲线的缓动（2^t）；Circular：圆形曲线的缓动（sqrt(1-t^2)）；Elastic：指数衰减的正弦曲线缓动；Ba
JS动画特效（一）
热门推荐
Zpp的前端学习博客
09-21 1万+
一、匀速运动 封装一个匀速运动的animate方法，要用到定时器，先清除定时器，一个盒子只能有一个定时器，这样的话，不会和其他盒子出现定时器冲突。而定时器本身会成为盒子的一个属性。 //ele为要操作的对象，target为要运动到的位置 function animate(ele,target){ clearInterval(ele.timer); //我们要求盒...
js实现图的广度优先搜索算法的动画演示效果
04-12
以下是js实现图的广度优先搜索算法的动画演示效果的代码： ```javascript // 创建一个图的类 class Graph { constructor() { // 使用邻接列表存储图中的节点和边 this.adjacencyList = new Map(); } // 添加...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值