mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
122 lines
3.2 KiB
HTML
122 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="myApp">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<title></title>
|
|
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
|
|
<link rel="stylesheet" href="../../../../dist/css/ionic.css" />
|
|
<script src="../../../../dist/js/ionic.bundle.js"></script>
|
|
<style>
|
|
.box {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: black;
|
|
}
|
|
#opts {
|
|
position: absolute;
|
|
top: 200px;
|
|
left: 10px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div ng-controller="MyCtrl">
|
|
<div class="box"></div>
|
|
<div id="opts">
|
|
<label>
|
|
Duration:
|
|
<input type="number" ng-model="anim.duration">
|
|
</label>
|
|
<label>
|
|
Repeat
|
|
<input type="number" ng-model="anim.repeat">
|
|
</label>
|
|
<br>
|
|
<label>
|
|
Delay
|
|
<input type="number" ng-model="anim.delay">
|
|
</label>
|
|
<br>
|
|
<label>
|
|
Auto reverse
|
|
<input type="checkbox" ng-model="anim.autoReverse">
|
|
</label>
|
|
<br>
|
|
<label>
|
|
Reverse
|
|
<input type="checkbox" ng-model="anim.reverse">
|
|
</label>
|
|
<br>
|
|
<button ng-click="do('{{v}}')" ng-repeat="v in fns">{{v}}</button>
|
|
<p>
|
|
<button ng-click="togglePause()">Toggle Pause/Play</button>
|
|
<button ng-click="stop()">Stop</button>
|
|
<button ng-click="restart()">Restart</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
angular.module('myApp', ['ionic'])
|
|
.config(['$ionicAnimationProvider', function($ionicAnimationProvider) {
|
|
//$ionicAnimationProvider.setSlowAnimations(true);
|
|
}])
|
|
.controller('MyCtrl', function($scope, $ionicAnimation) {
|
|
var currentAnimation;
|
|
$scope.fns = [
|
|
'linear',
|
|
'ease',
|
|
'ease-in',
|
|
'ease-out',
|
|
'ease-in-out'
|
|
];
|
|
$scope.anim = {
|
|
duration: 500,
|
|
delay: 0,
|
|
repeat: -1,
|
|
reverse: false,
|
|
autoReverse: false
|
|
}
|
|
var el = angular.element(document.querySelector('.box'));
|
|
$scope.do = function(fn) {
|
|
currentAnimation = $ionicAnimation(angular.extend({
|
|
el: el,
|
|
name: 'fadeIn',
|
|
duration: 500,
|
|
delay: 500,
|
|
autoReverse: false,
|
|
repeat: -1,
|
|
curve: fn,
|
|
step: function(v) {
|
|
el[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + (v * 400) + 'px, 0,0)';
|
|
},
|
|
complete: function() {
|
|
console.log('Animation complete!');
|
|
}
|
|
}, $scope.anim));
|
|
|
|
currentAnimation.start();
|
|
}
|
|
$scope.togglePause = function() {
|
|
if(currentAnimation.isPaused) {
|
|
currentAnimation.play();
|
|
} else {
|
|
currentAnimation.pause();
|
|
}
|
|
};
|
|
$scope.stop = function() {
|
|
currentAnimation.stop();
|
|
};
|
|
$scope.restart = function() {
|
|
currentAnimation.restart();
|
|
};
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|