[AngularJS+ GSAP] Greensock TimelineLite Animation Sequences

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:* )

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>

posted @ 2014-12-15 17:41 Zhentiw 阅读(1020) 评论(0) 收藏举报

刷新页面返回顶部

Answer1215

[AngularJS+ GSAP] Greensock TimelineLite Animation Sequences

公告