找回密码
当前位置：前端开发者 > 资源 > 正文

前端开发动画的框架

2018-07-08 分类：资源 阅读(929) 评论(0)

阿里巴巴前端开发工具|前端开发好用的动画框架|前端开发搭建本地服务器热更新

GSAP js

到底什么是GSAP?

GreenSock动画平台是一套脚本动画工具。它包括：
TweenLite ：处理几乎任何物件的任何属性的动画引擎核心。相对轻量级，但功能齐全，可以选择要使用的插件扩展(像是在浏览器中用于使DOM元素样式成为动画的CSSPlugin，或是滚动到页面上特定位置或div的ScrollToPlugin等)
TweenMax ：TweenLite强大的大哥;可以完成Twe​​enLite做的每一件事，并附加非必要的功能，如repeat(重复)，yoyo(溜溜球)，repeatDelay(重复延迟)等。它也包括许多常见的插件，如CSSPlugin，这样您就不需自行载入多个文件。侧重于全功能的，而不是轻量级的。
TimelineLite ：一个强大的，轻量级的序列工具，它就如一个存放补间动画的容器，可以很容易的整体控制补间动画，且精确管理补间动画彼此之间的时间关系。您甚至可以无层数限置的在其他timelines里面嵌套timelines。这使您可以很简单的模组化动画工作流。
TimelineMax ：扩展TimelineLite，提供完全相同的功能再加上有用的(但非必需)功能，如repeat、repeatDelay、yoyo、currentLabel()等。同样就如TweenMax和TweenLite的关系，TimelineMax的目标是成为最终的全功能工具，而不是轻量级的。
其他像是缓动工具、插件、工具包如Draggable(可拖动)等。

css缺少独立的 scale/rotation/position 控制

对元素的尺寸，旋转以及位置设置动画是非常常见的。在 css 里，这些设置都被塞进了transform属性当中，这样就不能够真正地独立控制它们。例如，你该如何用不同的时间和缓动函数去分别控制元素的rotate和scale属性？可能这个元素会不停的震荡，并且你想去旋转它。这只有用 JavaScript 才能实现。

以下是小例子：

html 代码片段

<!doctype html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>web前端开发界面实例:动画框架</title>
</head>
<style>
    body {
        background-color: black;
        margin: 0;
        padding: 0;
        font-family: Signika Negative, sans-serif;
        font-weight: 300;
    }
    html,
    body {
        height: 100%;
    }
    #demo {
        display: table;
        width: 100%;
        height: 100%;
    }
    #bg {
        position: relative;
        display: table-cell;
        height: 100%;
        overflow: hidden;
        text-align: center;
        vertical-align: middle;
    }
    #bg p {
        position: absolute;
        color: #777;
        top: 0px;
        padding: 0px 20px;
        text-align: left;
        z-index: -1000;
    }
    #box {
        color: black;
        font-size: 24px;
        padding: 10px 16px;
        border: 2px solid black;
        background: #9af600;
        background: -webkit-linear-gradient(top, rgba(184, 225, 252, 1) 0%, rgba(169, 210, 243, 1) 10%, rgba(144, 186, 228, 1) 25%, rgba(144, 188, 234, 1) 37%, rgba(144, 191, 240, 1) 50%, rgba(107, 168, 229, 1) 51%, rgba(162, 218, 245, 1) 83%, rgba(189, 243, 253, 1) 100%);
        display: inline-block;
        border-radius: 10px;
    }
    #controls {
        position: absolute;
        color: #999;
        width: 100%;
        bottom: 20px;
        text-align: center;
    }
    button {
        margin: 2px;
        padding: 4px 6px;
    }
</style>
<body>
    <div id=”demo”>
        <div id=”bg”>
            <p>tweenlite，是webgame开发人员比较常用的一个缓动库。 先简单介绍它的优点吧。 1.高效，性能不会差。 2.体积小，用到项目中，你的文件大小增加了3-4k。 3.容易使用，常用的函数就那么几个
            </p>
            <div id=”box”>TweenMax.js 应用</div>
            <div id=”controls”>
                <button id=”rotationX”>X轴旋转</button>
                <button id=”rotationY”>Y轴旋转</button>
                <button id=”rotation”>转圈</button>
                <button id=”wander”>漫游</button>
            </div>
        </div>
    </div>
</body>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js”></script>
<script>
    var $box = $(“#box”),
        $container = $(“#bg”),
        rotation = 0,
        rotationX = 0,
        rotationY = 0,
        wanderTween, ignoreRollovers;
    //设置3D容器视角
    TweenLite.set($container, { perspective: 500 });
    //取消Z轴，使旋转更加有趣。
    TweenLite.set($box, { transformOrigin: “center center -150px” });
    //使用scaleX和scaleY微微颤动起来
    TweenMax.to($box, 1.2, { scaleX: 0.8, scaleY: 0.8, force3D: true, yoyo: true, repeat: -1, ease: Power1.easeInOut });
    //翻转、旋转盒子但要避免过度旋转,我们会降低滚动在第一秒的动画。
    $box.hover(function () {
        if (!ignoreRollovers) {
            rotation += 360;
            ignoreRollovers = true;
            TweenLite.to($box, 2, { rotation: rotation, ease: Elastic.easeOut });
            TweenLite.delayedCall(1, function () {
                ignoreRollovers = false;
            });
        }
    }, function () { });
    $(“#rotation”).click(function () {
        rotation += 360;
        TweenLite.to($box, 2, { rotation: rotation, ease: Elastic.easeOut });
    });
    $(“#rotationX”).click(function () {
        rotationX += 360;
        TweenLite.to($box, 2, { rotationX: rotationX, ease: Power2.easeOut });
    });
    $(“#rotationY”).click(function () {
        rotationY += 360;
        TweenLite.to($box, 2, { rotationY: rotationY, ease: Power1.easeInOut });
    });
    $(“#wander”).click(function () {
        if (wanderTween) {
            wanderTween.kill();
            wanderTween = null;
            TweenLite.to($box, 0.5, { x: 0, y: 0 });
        } else {
            wander();
        }
    });
    //随机选择一个在屏幕上和动画,然后做一遍,又一遍。
    function wander() {
        var x = (($container.width() – $box.width()) / 2) * (Math.random() * 1.8 – 0.9),
            y = (($container.height() – $box.height()) / 2) * (Math.random() * 1.4 – 0.7);
        wanderTween = TweenLite.to($box, 2.5, { x: x, y: y, ease: Power1.easeInOut, onComplete: wander });
    }
</script>
</html>

这里是相关网站，大家可以学习一下：http://greensock.com/tweenlite

前端开发技能瀑布流|前端开发的动画实例|web前端开发的就业地区

赞(0)
前端开发者 » 前端开发动画的框架
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论