精华内容
下载资源
问答
  • tween.js是一款可生成平滑动画效果js动画。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果
  • 自己写的一个网页开发常用效果库与框架库,可以自定义导出自己想要的部分。 1.通过帮助文档help.html查看所有效果与使用方法。 2.通过config.html配置符合你需要并导出js; 内容包含如下: A:效果库类; 1.事件-...
  • tween.js是一款可生成平滑动画效果js动画。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果
  • h5静态js界面仓库管理界面效果图,登陆主页,详情,订单所有的功能都有
  • tween.js一个平滑动效果js动画

    千次阅读 2017-07-16 22:06:10
    tween.js一个平滑动效果js动画

    tween.js一个平滑动效果的js动画库

    1. tween.js是什么?
      tween.js是一款可生成平滑动效果的js动画库,允许以平滑的方式修改元素的属性值。

    2. tween.js达到什么效果?
      它可以通过设置,生成各种类似CSS3的动画效果。

    3. tween.js的参数有哪些?
      tween.js中的方法接收4个参数:t,b,c,d,分别是:
          t:current time 当前时间;
          意思为:开始的步骤(一般从0开始),预示着一段动画的开始;
          b beginning value 初始值;
          意思为:开始量(开始的属性值);
          c change in value 变化量;
          意思为:属性值的该变量,即结束位置的属性值 - 开始位置的属性值;
          d duration 持续时间;
          意思为:结束的步数(运动的总时间)。

    4. tween.js的效果:
      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:指数衰减的反弹缓动。
      tween.js文件就是对tween.js动画效果进行编译:(不压缩约150行代码)
      这里写图片描述

    5. tween.js的运用:
      easeIn:从0开始加速的缓动,慢->快;
      easeOut:减速到0的缓动,快->慢;
      easeInOut:前半段从0开始加速,后半段减速到0的缓动;
      注意:linear只有一种效果,匀速;

    6.参考代码:
        先将tween.js文件引入到html文件中;

    var t=0,
        b=0,
        c=500,
        d=50;
    function Run(){
        box.style.left = Tween.Back.easeIn(t, b, c, d) + "px";  
        if (t < d) {
            t++;
            setTimeout(Run, 10);
        }
        //通过以下代码可以观察在变化过程中tween.js四个参数的变化;     
        console.log("t"+t+"b"+b+"c"+c+"d"+d);
        }
    Run();

    动画效果:
    这里写图片描述

    上面的代码的动画:移动距离(变化量)为500px,移动时间(持续时间)为50毫秒,动画效果与参数定义相同;

    再看看下面代码的动画效果~

    if (t <= d) {
        t++;
        requestAnimationFrame(Run);
    } else {
        t++;
        setTimeout(Run, 10);
    }   

    动画效果:
    这里写图片描述
    红色方块去哪了?七月天气这么热,你跑得这么快,还不停;

    由此可见:上面的代码忽略c(变化量)、d(持续时间)的限定;
    当然,tween.js还有很多可用的动画效果,大侠们可以根据自己的需要合理使用,能够起到很好的效果!

    展开全文
  • ios应用源码之类似js的checkbox效果的效果库 .
  • tween.js强大的可生成平滑动画效果js库<!DOCTYPE html> <title>Tween.js / dynamic to ; charset=UTF-8"> <sty

    tween.js强大的可生成平滑动画效果的js库

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Tween.js / dynamic to</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <style>
                body {
                    margin: 0px;
                }
                #target {
                    font-size: 13px;
                    padding: 0px 32px;
                }
            </style>
            <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
        </head>
        <body>
            <div id="info" style="position: relative;">
                <h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
                <h2>07 _ dynamic to</h2>
                <p>tweening towards a moving target</p>
            </div>
    
            <div id="target"></div>
    
            <script src="../src/Tween.js"></script>
            <script src="js/RequestAnimationFrame.js"></script>
            <script>
                init();
                animate();
                function init() {
                    var width = 480;
                    var height = 320;
                    var target = document.getElementById('target');
                    var canvas = document.createElement( 'canvas' );
                    canvas.width = width;
                    canvas.height = height;
                    target.appendChild( canvas );
                    var context = canvas.getContext( '2d' );
                    var rabbit = { x: width - 50, y: 50 };
                    new TWEEN.Tween( rabbit ).to( { x: width - 50, y: height - 50 }, 3000 ).onUpdate( function() {
                        // draw background
                        context.fillStyle = "rgb(240,250,240)";
                        context.fillRect( 0, 0, width, height );
                        // draw rabbit
                        context.fillStyle = "rgb(150,150,150)";
                        context.save();
                        context.translate( this.x, this.y );
                        context.beginPath();
                        context.moveTo( 0, 0 );
                        context.bezierCurveTo( 15, 0, 15, -40, 5, -30 );
                        context.lineTo( 0, 0 );
                        context.bezierCurveTo( -15, 0, -15, -40, -5, -30 );
                        context.lineTo( 0, 0 );
                        context.fill();
                        context.beginPath();
                        context.arc( 0, 0, 15, 0, Math.PI * 2, true );
                        context.fill();
                        context.restore();
                    } ).start();
                    var fox = { x: 50, y: 50 };
                    new TWEEN.Tween( fox ).to( rabbit, 3000 ).onUpdate( function() {
                        // draw fox
                        context.fillStyle = "rgb(200,80,80)";
                        context.save();
                        context.translate( this.x, this.y - 13 );
                        context.scale( 1.2, 1.2 );
                        context.beginPath();
                        context.moveTo( 4, 24 );
                        context.lineTo( 8, 16 );
                        context.lineTo( 14, 10 );
                        context.lineTo( 15, 0 );
                        context.lineTo( 9, -10 );
                        context.lineTo( 2, 0 );
                        context.lineTo( -2, 0 );
                        context.lineTo( -9, -10 );
                        context.lineTo( -15, 0 );
                        context.lineTo( -14, 10 );
                        context.lineTo( -8, 16 );
                        context.lineTo( -4, 24 );
                        context.closePath();
                        context.fill();
                        context.restore();
                    } ).start();
                }
                function animate( time ) {
                    requestAnimationFrame( animate );
                    TWEEN.update( time );
                }
                animate();
            </script>
        </body>
    </html>
    <!DOCTYPE html> 
    <html lang="en">
        <head>
            <title>Black and Red / Tween.js</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
        </head>
        <body>
            <div id="info">
                <h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
                <h2>02 _ Black and red</h2>
                <p>4096 continuously changing color cells (in a 64x64 table)</p>
                <p></p>
            </div>
            <div id="target"></div>
    
            <style>
                body { font-family: Arial, Helvetica, sans; }
                table { border-collapse: collapse; }
                td { width: 5px; height: 5px; }
                #target { position: absolute; top: 4em; right: 3em; }
            </style>
    
            <script src="../src/Tween.js"></script>
            <script src="js/stats.min.js"></script>
            <script src="js/RequestAnimationFrame.js"></script>
            <script>
                var stats;
                init();
                animate();
                function init() {
                    var target = document.getElementById('target');
                    stats = new Stats();
                    target.appendChild(stats.domElement);
                    var t = document.createElement('table');
                    var index = 0;
                    for(var i = 0; i < 64; i++) {
                        var tr = t.insertRow(-1);
                        for(var j = 0; j < 64; j++) {
                            var td = tr.insertCell(-1);
                            td.style.background = '#000';
                            var x = (i+j) * 0.1;
                            var cell = { 'td': td, value : 0 };
                            var tween = new TWEEN.Tween(cell)
                                .to({ value: 1 }, 8000)
                                .delay((0.001 * index + Math.random()) * 500)
                                .easing(TWEEN.Easing.Elastic.InOut)
                                .onUpdate(function() {
                                    var c = Math.floor(this.value * 0xff);
                                    this.td.style.background = 'rgb(' + c + ', 0, 0)';
                                });
                            var tweenBack = new TWEEN.Tween(cell)
                                .to({ value: 0 }, 4000)
                                .delay((0.001*index + Math.random()) * 500)
                                .easing(TWEEN.Easing.Elastic.InOut)
                                .onUpdate(function() {
                                    var c = Math.floor(this.value * 0xff);
                                    this.td.style.background = 'rgb(' + c + ', 0, 0)';
                                });
                            tween.chain(tweenBack);
                            tweenBack.chain(tween);
                            tween.start();
                            index++;
                        }
                    }
                    target.appendChild(t);
                }
                function animate( time ) {
                    requestAnimationFrame( animate );
                    TWEEN.update( time );
                    stats.update();
                }
            </script>
        </body>
    </html>
    展开全文
  • js 滚动效果封装

    2013-09-17 11:01:41
    MSClass 通用不间断滚动JS封装类 的使用说明: 该Js类可设置各种形式的滚动效果,可随意将您的产品图片、新闻等内容设置为滚动。 上下左右、整屏、间歇式、延时滚动==效果均可实现。兼容所有主流浏览器。。。。
  • Velocity.js 可用于加速 JavaScript 的动画效果。类似 jQuery 的 $.animate() 方法,但无需依赖 jQuery。速度非常快,而且提供一些很酷的动画效果,支持 SVG 和滚动。 示例代码: $element.velocity({  width: ...
  • wiv.js 一个让div元素产生摇摆效果JS动画
  • alertify.js提醒效果JS库

    2013-04-07 21:35:00
    http://fabien-d.github.io/alertify.js/

    http://fabien-d.github.io/alertify.js/

    展开全文
  • Egg.js 是一个简单的 JS 。通过观察用户点击情况,你可以使用这个在网页上添加复活节彩蛋效果。 标签:Eggjs 分享 window._bd_share_config = {...
  • Dynamics.js是一款可以创建物理运动动画效果js库插件。你可以使用它来制作任何DOM元素的CSS属性动画,也可以制作SVG属性动画和任何JAVASCRIPT对象动画。
  • pull-element:实现触摸拖动元素交互效果JS库,支持所有方向
  • Sprite3D.js 是生成和操作 CSS 3D 转换效果。Sprite3D.js 没有任何的依赖项,所以非常容易集成 JS 。Sprite3D.js 使用简单的 JavaScript 语法来控制 3D 转换效果。浏览器支持 Chrome, Safari, iOS, Android 4,...
  • 使用由WebGL支持的图像效果库glfx.js在浏览器中实时调整照片。 它使用您的图形卡来实现图像效果,而仅靠JavaScript不可能实时应用这些效果。 glfx.js有两个警告。 首先,WebGL是一项新技术,仅在最新的浏览器中...
  • 今天给大家介绍一下 wordpress用到的js效果库 1.fat.js实现颜色的渐变效果 首先包含fat.js文件,只要在你要实现效果的元素上加上class=”fade-FFFF33″形式就可以了。FFFF33是开始的颜色,会从这个颜色渐变到元件的...
  • CountUp.js是一个数字滚动增加展示效果展示的JS库
  • js库

    2017-09-18 17:19:37
    Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的 ...Typed.js — 打字机效果 Waypoints.js — 滚动到某个元素位置时触发一个功能 Highlight.js — web 语法高亮 Chart.j

    Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库

    Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库

    Fullpage.js— 快速实现全屏滚动特性

    Typed.js — 打字机效果

    Waypoints.js — 滚动到某个元素位置时触发一个功能

    Highlight.js — web 语法高亮

    Chart.js — 使用 JavaScript 创建漂亮的图表

    Instantclick — 能够明显加速网站加载时间,鼠标 hover 时预加载资源

    Chartist — 另一个图表库

    Motio — 一个基于动画和平移的雪碧图库

    Animsition — CSS 实现动画过渡的 jQuery 插件

    Barba.js — 流式页面过渡

    TwentyTwenty — 一个对比图片的可视化 diff 工具

    Vivus.js — 在 SVG 上绘制动画

    Wow.js — 滚动时展现动画

    Scrolline.js — 页面滚动时显示滚动进度

    Velocity.js — 快速流畅的 JavaScript 动画

    Animate on scroll — 漂亮的页面滚动元素动画

    Handlebars.js — Javascript 模板

    jInvertScroll — 视差滚动

    One page scroll — 又一个页面滚动库

    Parallax.js — 对智能设备方向变化做出响应的视差引擎

    Typeahead.js — 搜索补全

    Dragdealer.js — 炫酷拖拽

    Bounce.js — 创建炫酷的 CSS3 动画

    Pagepiling.js — 全屏滚动

    Multiscroll.js — 两列垂直反向滚动

    Favico.js — 动态 favicon

    Midnight.js — 固定头部切换效果

    Anime.js — 动画库

    Keycode — 获取键盘按键的 JavaScript keycode

    Sortable — 拖拽插件

    Flexdatalist — 自动补全

    Slideout.js — 移动应用侧滑导航

    Jquerymy — 使用 jQuery 实现双向数据绑定

    Cleave.js — 实时格式化输入内容

    Page — 客户端单页应用路由

    Selectize.js — 用来添加 tag 的 Hybrid 选择框

    Nice select — 创建漂亮的选择框的 jQuery 库

    Tether — 使用固定定位来创建相关元素

    Shepherd.js — 为应用创建新手引导

    Tooltip — tooltip 提示框

    Select2 — Jquery 选择框插件

    IziToast — 通知弹窗实现

    IziModal — 模态框实现

    CSS 库 / 设计相关

    Animate.css — 动画库

    Flat UI Colors — 扁平化设计配色

    Material design lite— 基于 Google material design 的框架

    Colorrrs — 随机颜色生成器

    Section separators — CSS 实现区域分割

    Topcoat — 框架

    Create ken burns effect — 使用 CSS3 动画实现 Ken burns 特效

    DynCSS — 给 CSS 添加 function,动态化 CSS

    Magic animations — CSS3 实现动画特效

    CSSpin — css spinners 合集

    Feather icons — Icon 集合

    Ion icons — Icon 集合

    Font awesome — Icon 集合

    Font generator — 组合多个字体创建混合字体

    On/Off switch — 使用 CSS 创建 on/off 开关、radio 按钮

    UI Kit — 框架

    Bootstrap — 框架

    Foundation — 框架

    有用的产品/链接

    cheatsheet — 可以写在<head>中的所有标签

    Ghost — 基于 Node.js 的博客平台

    What runs — 一个用于网站技术分析的 Chrome 插件

    Learn anything — 一个强大的用于分析某个主题的思维导图

    展开全文
  • 网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 Three.js官网的文档,部分文字和代码为我个人...
  • 同时,为了让你快速的将它与一些流行的框架整合使用(AngularJS,Angular 2,React.js 和 Vue.js.),它还提供了一些独立的样板版本。React Trend这是由Unsplash团队出品的一款 React 组件,用于创建展示趋势与活动...
  • 前端大块效果js库

    2016-10-18 10:40:39
    http://alvarotrigo.com/fullPage/

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,126
精华内容 2,050
关键字:

js效果库