TimelineLite is a piece of the Greensock TweenMax library that provides the ability to create sequenced animation with very little code or setup.

Key value:

fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object, position:* )

Read More: https://egghead.io/lessons/angularjs-greensock-timelinelite-animation-sequences

Example:

angular.module('website', ['ngAnimate'])

    .controller('MainCtrl', function ($scope) {

        $scope.slides = [

            {bg: 'images/bg3.jpg', avatar: 'images/john.png', title: 'Big Boss', subtitle: 'Monkey king'},

            {bg: 'images/bg1.jpg', avatar: 'images/joel.png', title: 'Second Boss', subtitle: 'Monkey leader'},

            {bg: 'images/bg2.jpg', avatar: 'images/lukas.png', title: 'Other monkeys', subtitle: 'MOPSI'}

        ];

        $scope.direction = 'left';

        $scope.currentIndex = 0;

        $scope.setCurrentSlideIndex = function (index) {

            $scope.direction = (index > $scope.currentIndex) ? 'left' : 'right';

            $scope.currentIndex = index;

        };

        $scope.isCurrentSlideIndex = function (index) {

            return $scope.currentIndex === index;

        };

    })

    .animation('.slide-animation', function () {

        return {

            //remove the current card

            beforeAddClass: function (element, className, done) {

                if (className == 'ng-hide') {

                    var scope = element.scope(),

                        finishPoint = element.parent().width();

                    console.log(element.parent().width());

                    if(scope.direction !== 'right') finishPoint = -finishPoint;

                    TweenLite.to(element, 0.5, {left:finishPoint, ease: Ease.easeInOut, onComplete: done});

                }

                else {

                    done();

                }

            },

            //fade in selected card

            removeClass: function (element, className, done) {

                if (className == 'ng-hide') {

                    var scope = element.scope(),

                        startPoint = element.parent().width(),

                        //start a timeline

                        tl = new TimelineLite();

                    if(scope.direction === 'right') startPoint = -startPoint;

                    //chain methods, animate one by one

                    //.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object, position:* )

                    //fromTo(element.find('.title'), 0.5, { left: -200, alpha: 0}, {left:0, alpha:1, ease:Ease.easeInOut} )

                    //element.find('.title'): find the element

                    //0.5: 500ms

                    //{left: -200, alpha: 0}: animate start with left: -200 and alpha : 0

                    //{left: 0, alpha: 1, ease: Ease.easeInOut}: animate end with left: 0....

                    tl.fromTo(element, 0.1, { left: startPoint}, {left:0, ease: Ease.easeInOut, onComplete: done})

                        .fromTo(element.find('.title'), 0.5, { left: -200, alpha: 0}, {left:0, alpha:1, ease:Ease.easeInOut} )

                        .fromTo(element.find('.subtitle'), 0.5, { left: -200, alpha: 0}, {left:0, alpha:1, ease:Ease.easeInOut} )

                        .fromTo(element.find('.avatar'), 0.5, { left: 800, alpha: 0}, {left:380, alpha:1, ease:Ease.easeInOut} );

                }

                else {

                    done();

                }

            }

        };

    }); 
<!DOCTYPE html>

<html ng-app="website">

    <head>

        <meta charset="utf-8">

        <title>Egghead.io - Greensock TimelineLite</title>

        <link href="assets/css/bootstrap.css" rel="stylesheet">

        <link rel="stylesheet" href="assets/css/timeline.greensock.css">

    </head>

    <body ng-controller="MainCtrl">

        <div class="slider">

            <div ng-repeat="slide in slides"

                 ng-hide="!isCurrentSlideIndex($index)"

                 class="slide slide-animation">

                <img class="nonDraggableImage" ng-src="{{slide.bg}}">

                <img class="nonDraggableImage avatar" ng-src="{{slide.avatar}}">

                <h1 class="title"><span>{{slide.title}}</span></h1>

                <h3 class="subtitle"><span>{{slide.subtitle}}</span></h3>

            </div>

        </div>

        <div class="nav">

            <div ng-repeat="slide in slides"

                 ng-class="{'active':isCurrentSlideIndex($index)}"

                 ng-click="setCurrentSlideIndex($index)">

                <h3>{{slide.title}}</h3>

            </div>

        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>

        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>

        <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>

        <script src="js/timeline.greensock.js"></script>

    </body>

</html>

[AngularJS+ GSAP] Greensock TimelineLite Animation Sequences的更多相关文章

  1. GreenSock & SVG Animation

    GreenSock & SVG Animation refs https://greensock.com/ https://greensock.com/learning/ GSAP https ...

  2. JS动画 | 用TweenMax实现收集水滴效果

    之前在CodePen上接触了TweenMax, 被它能做到的酷炫效果震撼了. (文末放了5个GSAP的效果GIF) 最近要做一个"收集水滴"的动效, 于是就试用了一下TweenMa ...

  3. Web Best Practices

    Web Best Practices General Google WebFundamentals - Github JavaScript Style Guide - Github Google In ...

  4. Dojo特效（翻译）

    http://dojotoolkit.org/documentation/tutorials/1.10/effects/index.html In this tutorial, we will exp ...

  5. Calculating Stereo Pairs

    Calculating Stereo Pairs Written by Paul BourkeJuly 1999 Introduction The following discusses comput ...

  6. 大话ASP.NET(第二篇,Angular结构篇--翻译)

    AngularJS API Docs Welcome to the AngularJS API docs page. These pages contain the AngularJS referen ...

  7. AngularJS1.X学习笔记14-动画(解读文档)

    最近在看算法分析,那个大O啊,小o啊,分治法啊(目前就看到这里),真是搞死了.这回呢休息一下,学学AngularJS动画,上一篇文章根据自由男人的书简单谈到了动画的话题,发现反响很大(好吧,我说慌了, ...

  8. PhoenixFD插件流体模拟——UI布局【Export】详解

    Liquid Export 流体导出 本文主要讲解Export折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liquid+Expor ...

  9. web 常用开发工具

    he把字符转化为实体字符 awesome-vue Vue资源 clipboard.js 粘贴板 Share.js 一键分享 nock 模拟异步数据 Clamp.js 限制文本最大行数 pinyin 将 ...

随机推荐

  1. Steam即将正式加入人民币支付（转）

    Valve将在2015年Q4和2016年Q1加入一批新的货币结算支持,其中包括了人民币,这意味着以后玩家将无需在跳转支付平台后并通过美元结算.这对中国玩家来说是喜是忧? 本文由爱玩网整理报道,转载请保 ...

  2. 分段统计与Oracle的分析函数、逻辑判断等知识点的综合运用

    重点部分:TOTAL层 项目要求: 统计每个巡检员(USER_ID)当前月的签到率及查询相关字段 签到率公式:以巡检员为单位, (当月至今天为止签到的所有点/该月巡检点的总个数)=(b.Point/a ...

  3. python中隐式的内存共享

    在python中,基本上使用的是引用,那么就会造成一个隐式的内存共享,特别是在容器对象中,例如list,dictionary 对于不可变对象,是不会造成隐式的内存共享情况,如下所示: >> ...

  4. motan源码解读：注册中心zookeeper(2)

    上文大概讲解了利用zookeeper如何实现注册中心的.本文主要是从源码角度说明下.代码都在模块motan-registry-zookeeper中,其实在在这个模块中就3个类. ZkNodeType: ...

  5. linux常用的一些命令(不断增加中)

    linux 下重启 apache: httpd -k restart 下面这些大多命令都可以在<鸟哥私房菜>的服务器中的“常用网络指令”和基础中的“程序与资源管理”中找到ps -aux 这 ...

  6. 给一已经排序数组A和x,求A中是否包含两个元素之和为x

    亲爱的大神老爷们,这是小渣第一次写blog,欢迎大家来喷(批评指正),算法渣因为面试中连这道题都不会写就自己琢磨了一下,也参考了网上大家的做法 解法一: 思路:从首尾向目的靠拢,因为已经排序,[假设存 ...

  7. Swift 脚本(运行时带参数)

    #!/usr/bin/env xcrun swift import Foundation let args = Process.arguments print("Arg:\(args)&qu ...

  8. cocos2d-html5在cocos2d-x里面打包编译

    main.cpp打开USE_WIN32_CONSOLE输出 #include "main.h" #include "AppDelegate.h" #includ ...

  9. openfire 最大连接数调优

    https://community.igniterealtime.org/thread/48064#224126 https://community.igniterealtime.org/thread ...

  10. django1.77＋mod_wsgi+python2.79+apache2.24 在阿里云centos部署攻略

    心平气和的记录一下今天 踩的坑以防万一 以后还踩 首先我今天的平台是在 阿里云上的一台纯净版的 centos6.5 64位主机上进行的 首先装python2.7 去官网下载python2.7安装包 然 ...