mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
feat(animation): Javascript Animation Service
This commit is contained in:
Max Lynch
220
test/html/animation.html
Normal file
220
test/html/animation.html
Normal file
@@ -0,0 +1,220 @@
|
||||
<!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>
|
||||
<script src="dynamics.js"></script>
|
||||
<style>
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: black;
|
||||
}
|
||||
#draggable {
|
||||
top: 200px;
|
||||
}
|
||||
#opts {
|
||||
position: absolute;
|
||||
top: 400px;
|
||||
left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div ng-controller="MyCtrl">
|
||||
<div class="box"></div>
|
||||
<div class="box" id="draggable"></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>
|
||||
<button ng-click="do('spring')">Spring</button>
|
||||
<button ng-click="do('gravity')">Gravity</button>
|
||||
<p>
|
||||
<input type="text" ng-model="anim.bx1">
|
||||
<input type="text" ng-model="anim.by1">
|
||||
<input type="text" ng-model="anim.bx2">
|
||||
<input type="text" ng-model="anim.by2">
|
||||
<button ng-click="do('cubic-bezier')">cubic-bezier</button>
|
||||
</p>
|
||||
<p>
|
||||
<button ng-click="togglePause()">Toggle Pause/Play</button>
|
||||
<button ng-click="stop()">Stop</button>
|
||||
<button ng-click="restart()">Restart</button>
|
||||
</p>
|
||||
</div>
|
||||
{{animationResult}}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
angular.module('myApp', ['ionic'])
|
||||
.config(['$ionicAnimationProvider', function($ionicAnimationProvider) {
|
||||
var animOne = $ionicAnimationProvider.create({
|
||||
name: 'fadeIn',
|
||||
duration: 2000,
|
||||
delay: 500,
|
||||
autoReverse: false,
|
||||
repeat: 0,
|
||||
curve: 'ease',
|
||||
|
||||
onComplete: function(didComplete, droppedFrames) {
|
||||
console.log('Done. Dropped ' + droppedFrames + '. Did complete? ' + didComplete);
|
||||
},
|
||||
|
||||
step: function(v) {
|
||||
console.log('Anim stepping', v);
|
||||
//el[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + (v * 400) + 'px, 0,0)';
|
||||
},
|
||||
complete: function() {
|
||||
console.log('Animation complete!');
|
||||
}
|
||||
|
||||
});
|
||||
animOne.start();
|
||||
var ot = animOne.clone();
|
||||
ot.step = function(v) {
|
||||
console.log('A2', v);
|
||||
};
|
||||
ot.start();
|
||||
}])
|
||||
.controller('MyCtrl', function($scope, $ionicAnimation, $ionicGesture) {
|
||||
var gestureEl = angular.element(document.getElementById('draggable'));
|
||||
var dragAnim = $ionicAnimation({
|
||||
curve: 'linear',
|
||||
step: function(v) {
|
||||
console.log(v);
|
||||
gestureEl[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + (v * 400) + 'px, 0,0)';
|
||||
}
|
||||
});
|
||||
$ionicGesture.on('drag', function(e) {
|
||||
var x = e.gesture.touches[0].pageX;
|
||||
dragAnim.setPercent(Math.max(0, Math.min(x, 400) / 400));
|
||||
}, gestureEl);
|
||||
|
||||
|
||||
var currentAnimation;
|
||||
$scope.fns = [
|
||||
'linear',
|
||||
'ease',
|
||||
'ease-in',
|
||||
'ease-out',
|
||||
'ease-in-out'
|
||||
];
|
||||
$scope.anim = {
|
||||
duration: 2000,
|
||||
delay: 0,
|
||||
repeat: 0,
|
||||
reverse: false,
|
||||
autoReverse: false,
|
||||
bx1: 0.17,
|
||||
by1: 0.67,
|
||||
bx2: 0.83,
|
||||
by2: 0.67
|
||||
}
|
||||
var el = angular.element(document.querySelector('.box'));
|
||||
$scope.do = function(fn) {
|
||||
console.log(fn);
|
||||
if(fn == 'cubic-bezier') {
|
||||
fn = 'cubic-bezier(' +
|
||||
$scope.anim.bx1 + ',' +
|
||||
$scope.anim.by1 + ',' +
|
||||
$scope.anim.bx2 + ',' +
|
||||
$scope.anim.by2 + ')';
|
||||
}
|
||||
currentAnimation = angular.extend({
|
||||
name: 'fadeIn',
|
||||
duration: 2000,
|
||||
delay: 500,
|
||||
autoReverse: false,
|
||||
repeat: 0,
|
||||
curve: fn,
|
||||
|
||||
|
||||
onComplete: function(didComplete, droppedFrames) {
|
||||
console.log('Done. Dropped ' + droppedFrames + '. Did complete? ' + didComplete);
|
||||
},
|
||||
|
||||
step: function(v) {
|
||||
el[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + (v * 400) + 'px, 0,0)';
|
||||
},
|
||||
complete: function() {
|
||||
console.log('Animation complete!');
|
||||
}
|
||||
}, $scope.anim);
|
||||
|
||||
if(fn == 'spring') {
|
||||
currentAnimation = angular.extend(currentAnimation, {
|
||||
dynamicsType: ionic.Animation.Dynamics.Spring,
|
||||
frequency: 15,
|
||||
friction: 200,
|
||||
initialForce: false,
|
||||
});
|
||||
} else if (fn == 'gravity') {
|
||||
|
||||
currentAnimation = angular.extend(currentAnimation, {
|
||||
dynamicsType: ionic.Animation.Dynamics.Gravity,
|
||||
frequency: 15,
|
||||
friction: 200,
|
||||
initialForce: false,
|
||||
});
|
||||
}
|
||||
|
||||
currentAnimation = $ionicAnimation(currentAnimation);
|
||||
|
||||
$ionicGesture.on('drag', function(e) {
|
||||
var x = e.gesture.touches[0].pageX;
|
||||
currentAnimation.setPercent(Math.max(0, Math.min(x, 400) / 400));
|
||||
}, angular.element(el));
|
||||
$ionicGesture.on('release', function(e) {
|
||||
currentAnimation.play();
|
||||
}, angular.element(el));
|
||||
|
||||
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>
|
||||
56
test/html/animation_transition.html
Normal file
56
test/html/animation_transition.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!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>
|
||||
#v1 {
|
||||
background-color: blue;
|
||||
}
|
||||
#v2 {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div ng-controller="MyCtrl">
|
||||
<ion-view id="v1">
|
||||
<h2>Page 1</h2>
|
||||
</ion-view>
|
||||
<ion-view id="v2">
|
||||
<h2>Page 2</h2>
|
||||
</ion-view>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
angular.module('myApp', ['ionic'])
|
||||
.config(['$ionicAnimationProvider', function($ionicAnimationProvider) {
|
||||
//$ionicAnimationProvider.setSlowAnimations(true);
|
||||
}])
|
||||
.controller('MyCtrl', function($scope, $ionicAnimation, $ionicGesture) {
|
||||
var v1 = angular.element(document.getElementById('v1'));
|
||||
var v2 = angular.element(document.getElementById('v2'));
|
||||
|
||||
var dragAnim = $ionicAnimation({
|
||||
curve: 'ease-in-out',
|
||||
duration: 1,
|
||||
step: function(v) {
|
||||
console.log(v);
|
||||
v2[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + (v * 400) + 'px, 0,0)';
|
||||
}
|
||||
});
|
||||
$ionicGesture.on('drag', function(e) {
|
||||
var x = e.gesture.touches[0].pageX;
|
||||
dragAnim.setPercent(Math.max(0, Math.min(x, 400) / 400));
|
||||
}, v2);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1667
test/html/dynamics.js
Normal file
1667
test/html/dynamics.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user