首页 > 代码库 > [AngularJS+ GSAP] Greensock TimelineLite Animation Sequences
[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:* )
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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。