第十四節：應用動畫 · angularjs

本節中，我們將使用ngAnimate來實現圖片切換的眩目效果。和使用其它的模塊一樣，我們首先需要下載并引用這個庫。 # 下載 ~~~ panjiedeMacBook-Pro:angularjs panjie$ bower install angular-animate#1.5.7 --save bower cached https://github.com/angular/bower-angular.git#1.5.7 bower validate 1.5.7 against https://github.com/angular/bower-angular.git#1.5.7 bower cached https://github.com/angular/bower-angular-animate.git#1.5.7 bower validate 1.5.7 against https://github.com/angular/bower-angular-animate.git#1.5.7 bower install angular-animate#1.5.7 bower install angular#1.5.7 angular-animate#1.5.7 bower_components/angular-animate └── angular#1.5.7 angular#1.5.7 bower_components/angular ~~~ # 引用 `index.html` ~~~ <script src="bower_components/angular-animate/angular-animate.js"></script> ~~~ # 依賴注入 `app.module.js` ~~~ // 定義模塊 var phonecatApp = angular.module('phonecatApp', ['yunZhi', 'ngRoute', 'core', 'ngAnimate']); ~~~ # 測試網絡無錯誤，說明正確的進行引用。 # 引入CSS文件 animate是與CSS協同工作的。CSS的樣子大概是這個樣子: ~~~ .phone-list-item.ng-enter, .phone-list-item.ng-leave, .phone-list-item.ng-move { transition: 0.5s linear all; } .phone-list-item.ng-enter, .phone-list-item.ng-move { height: 0; opacity: 0; overflow: hidden; } .phone-list-item.ng-enter.ng-enter-active, .phone-list-item.ng-move.ng-move-active { height: 120px; opacity: 1; } .phone-list-item.ng-leave { opacity: 1; overflow: hidden; } .phone-list-item.ng-leave.ng-leave-active { height: 0; opacity: 0; padding-bottom: 0; padding-top: 0; } ~~~ 我們當然可以自己寫，也可以直接使用大牛們為我們準備好的。 # 下載CSS包在網絡上，這種資源有很多，當然還有封裝的更完美的，比如說ng-fx。但這，我們只需要這種只有CSS的。 > http://augus.github.io/ngAnimate/ > http://theoinglis.github.io/ngAnimate.css/#/ 都是angularjs下的優秀的動畫庫，貌似第一個更知名一些，不過在本節中我們使用第二種。 ![](https://box.kancloud.cn/2016-08-04_57a30c473c077.png) 右鍵查看其鏈接地址，然后使用bower安裝 ~~~ panjiedeMacBook-Pro:angularjs panjie$ bower install https://raw.githubusercontent.com/theoinglis/ngAnimate.css/master/build/nga.all.min.css --save bower not-cached https://raw.githubusercontent.com/theoinglis/ngAnimate.css/master/build/nga.all.min.css#* bower resolve https://raw.githubusercontent.com/theoinglis/ngAnimate.css/master/build/nga.all.min.css#* bower download https://raw.githubusercontent.com/theoinglis/ngAnimate.css/master/build/nga.all.min.css bower resolved https://raw.githubusercontent.com/theoinglis/ngAnimate.css/master/build/nga.all.min.css#e-tag:cd5969157 bower install nga.all.min#e-tag:cd5969157 nga.all.min#e-tag:cd5969157 bower_components/nga.all.min ~~~ # 引用CSS `index.html` ~~~ + <link rel="stylesheet" href="bower_components/nga.all.min/index.css"> ~~~ # 增加CSS屬性查看一個效果，并復制class的值 ![](https://box.kancloud.cn/2016-08-04_57a30c475eb5a.png) 將class的值，添加到我們想讓產生做用的地方。 `yun-zhi/phone-list.component.js` ~~~ - <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail"> + <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail nga-default nga-stagger nga-rotate-up"> ~~~ 測試：在變形中截圖如下： ![](https://box.kancloud.cn/2016-08-04_57a30c4783bda.png) ## 自定義幻燈片下面，我們在將效果添加到手機詳情表的手機大圖切換中。大多的幻燈片，都基于如下原理： > 在后臺存放N張幻燈片，然后只顯示當前的圖片。我們也不例外： `yun-zhi/phone-detail.template.html` ~~~ <div class="col-md-4"> _ <img ng-src="{{$ctrl.mainImageUrl}}" class="phone img-responsive img-rounded" /> + <img ng-repeat="img in $ctrl.phone.images" ng-src="{{img}}" ng-show="img === $ctrl.mainImageUrl" class="img-responsive img-rounded" /> </div> ~~~ > ng-show，決定了什么情況下顯示這個元素。這樣，我們在幻燈片模塊下，一起載入了多張圖片，但卻只顯示當前的圖片。 ![](https://box.kancloud.cn/2016-08-04_57a30c47a8909.png) 然后我們需要和前面一樣，加入CSS以實現動畫。在此，我們需要選擇 ![](https://box.kancloud.cn/2016-08-04_57a30c47d256d.png) 至于原因，大家可以一個個的效果試一下。 `yun-zhi/phone-detail.template.html` ~~~ <img ng-repeat="img in $ctrl.phone.images" ng-src="{{img}}" ng-show="img === $ctrl.mainImageUrl" class="img-responsive img-rounded nga-default nga-stagger nga-squash-right" /> ~~~ 切換時的樣子： ![](https://box.kancloud.cn/2016-08-04_57a30c4807ce7.png) 最終我們實現了加入動畫的效果。官方教程中，自定義了CSS，還利用animate()創建了自己的動動畫效果。但做為入門教程而言，涉及的知識面較廣，內容較深。在此，不做深入學習。其實在github中，我們還可以找到另外一替代方案，比如：ng-fx。 > https://github.com/AngularClass/ng-fx `yun-zhi/phone-detail.template.html` ~~~ <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <img ng-repeat="img in $ctrl.phone.images" ng-src="{{img}}" ng-show="img === $ctrl.mainImageUrl" class="img-responsive img-rounded nga-default nga-stagger nga-squash-right" /> </div> <div class="col-md-8"> <h1>{{$ctrl.phone.name}}</h1> <p>{{$ctrl.phone.description}}</p> <div class="row"> <div class="col-md-2" ng-repeat="img in $ctrl.phone.images"> <img ng-click="$ctrl.setImage(img)" ng-src="{{img}}" class="img-thumbnail" /> </div> </div> </div> </div> <div class="row"> <div class="col-md-2"> <h4>Availability and Networks</h4> <dl> <dt>Availability</dt> <dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd> </dl> </div> <div class="col-md-2"> <h4>Availability and Networks</h4> <dl> <dt>Availability</dt> <dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd> </dl> </div> <div class="col-md-2"> <h4>Battery</h4> <dl> <dt>Type</dt> <dd>{{$ctrl.phone.battery.type}}</dd> <dt>Talk Time</dt> <dd>{{$ctrl.phone.battery.talkTime}}</dd> <dt>Standby time (max)</dt> <dd>{{$ctrl.phone.battery.standbyTime}}</dd> </dl> </div> <div class="col-md-2"> <h4>Storage and Memory</h4> <dl> <dt>RAM</dt> <dd>{{$ctrl.phone.storage.ram}}</dd> <dt>Internal Storage</dt> <dd>{{$ctrl.phone.storage.flash}}</dd> </dl> </div> <div class="col-md-2"> <h4>Connectivity</h4> <dl> <dt>Network Support</dt> <dd>{{$ctrl.phone.connectivity.cell}}</dd> <dt>WiFi</dt> <dd>{{$ctrl.phone.connectivity.wifi}}</dd> <dt>Bluetooth</dt> <dd>{{$ctrl.phone.connectivity.bluetooth}}</dd> <dt>Infrared</dt> <dd ng-bind-html="$ctrl.phone.connectivity.infrared | checkmark"></dd> <dt>GPS</dt> <dd ng-bind-html="$ctrl.phone.connectivity.gps | checkmark"></dd> </dl> </div> <div class="col-md-2"> <h4>Android</h4> <dl> <dt>OS Version</dt> <dd>{{$ctrl.phone.android.os}}</dd> <dt>UI</dt> <dd>{{$ctrl.phone.android.ui}}</dd> </dl> </div> <div class="col-md-2"> <h4>Size and Weight</h4> <dl> <dt>Dimensions</dt> <dd ng-repeat="dim in $ctrl.phone.sizeAndWeight.dimensions">{{dim}}</dd> <dt>Weight</dt> <dd>{{$ctrl.phone.sizeAndWeight.weight}}</dd> </dl> </div> <div class="col-md-2"> <h4>Display</h4> <dl> <dt>Screen size</dt> <dd>{{$ctrl.phone.display.screenSize}}</dd> <dt>Screen resolution</dt> <dd>{{$ctrl.phone.display.screenResolution}}</dd> <dt>Touch screen</dt> <dd ng-bind-html="$ctrl.phone.display.touchScreen | checkmark"></dd> </dl> </div> <div class="col-md-2"> <h4>Hardware</h4> <dl> <dt>CPU</dt> <dd>{{$ctrl.phone.hardware.cpu}}</dd> <dt>USB</dt> <dd>{{$ctrl.phone.hardware.usb}}</dd> <dt>Audio / headphone jack</dt> <dd>{{$ctrl.phone.hardware.audioJack}}</dd> <dt>FM Radio</dt> <dd ng-bind-html="$ctrl.phone.hardware.fmRadio | checkmark"></dd> <dt>Accelerometer</dt> <dd ng-bind-html="$ctrl.phone.hardware.accelerometer | checkmark"></dd> </dl> </div> <div class="col-md-2"> <h4>Camera</h4> <dl> <dt>Primary</dt> <dd>{{$ctrl.phone.camera.primary}}</dd> <dt>Features</dt> <dd>{{$ctrl.phone.camera.features.join(', ')}}</dd> </dl> </div> <div class="col-md-2"> <h4>Additional Features</h4> <dd>{{$ctrl.phone.additionalFeatures}}</dd> </div> </div> </div> ~~~