javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ripple): tweak ripple numbers

Browse Source
This commit is contained in:
Adam Bradley
2015-09-28 14:15:49 -05:00
parent 4df3a9abd8
commit 30327ab07d
2 changed files with 25 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
ionic/components/tap-click/ripple.ts
View File

@ -17,39 +17,39 @@ export class RippleActivator extends Activator {
super.downAction(ev, activatableEle, pointerX, pointerY); super.downAction(ev, activatableEle, pointerX, pointerY);
// create a new ripple element // create a new ripple element
let r = activatableEle.getBoundingClientRect(); let clientRect = activatableEle.getBoundingClientRect();
let clientPointerX = (pointerX - clientRect.left);
let clientPointerY = (pointerY - clientRect.top);
let outerRadius = Math.sqrt(r.width + r.height); let x = Math.max(Math.abs(clientRect.width - clientPointerX), clientPointerX) * 2;
let radiusDuration = (1000 * Math.sqrt(outerRadius / TOUCH_DOWN_ACCEL) + 0.5); let y = Math.max(Math.abs(clientRect.height - clientPointerY), clientPointerY) * 2;
let diameter = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
let x = Math.max(Math.abs(r.width - pointerX), pointerX) * 2; let radius = Math.sqrt(clientRect.width + clientRect.height);
let y = Math.max(Math.abs(r.height - pointerY), pointerY) * 2; let duration = (1000 * Math.sqrt(radius / TOUCH_DOWN_ACCEL) + 0.5);
let size = (Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))) - 10;
let rippleEle = document.createElement('md-ripple'); let rippleEle = document.createElement('md-ripple');
let eleStyle = rippleEle.style; let eleStyle = rippleEle.style;
eleStyle.width = eleStyle.height = size + 'px'; eleStyle.width = eleStyle.height = diameter + 'px';
eleStyle.marginTop = eleStyle.marginLeft = -(size / 2) + 'px'; eleStyle.marginTop = eleStyle.marginLeft = -(diameter / 2) + 'px';
eleStyle.left = (pointerX - r.left) + 'px'; eleStyle.left = clientPointerX + 'px';
eleStyle.top = (pointerY - r.top) + 'px'; eleStyle.top = clientPointerY + 'px';
activatableEle.appendChild(rippleEle); activatableEle.appendChild(rippleEle);
let ripple = this.ripples[Date.now()] = { let ripple = this.ripples[Date.now()] = {
ele: rippleEle, ele: rippleEle,
outerRadius: outerRadius, radius: radius,
radiusDuration: radiusDuration duration: duration
}; };
//console.log('outerRadius', outerRadius, 'radiusDuration', radiusDuration, 'size', size)
// expand the circle from the users starting point // expand the circle from the users starting point
// start slow, and when they let up, then speed up the animation // start slow, and when they let up, then speed up the animation
ripple.expand = new Animation(rippleEle, {renderDelay: 0}); ripple.expand = new Animation(rippleEle, {renderDelay: 0});
ripple.expand ripple.expand
.fromTo('scale', '0.001', '1') .fromTo('scale', '0.001', '1')
.duration(radiusDuration) .duration(duration)
.playbackRate(DOWN_PLAYBACK_RATE) .playbackRate(EXPAND_DOWN_PLAYBACK_RATE)
.onFinish(()=> { .onFinish(()=> {
// finished expanding // finished expanding
ripple.expand && ripple.expand.dispose(); ripple.expand && ripple.expand.dispose();
@ -73,8 +73,8 @@ export class RippleActivator extends Activator {
// How much more time do we need to finish the radius animation? // How much more time do we need to finish the radius animation?
// Math: (radius/second) * ((total_radius_time) - current_time) // Math: (radius/second) * ((total_radius_time) - current_time)
ripple.expand.remainingTime = (ripple.outerRadius / ripple.radiusDuration) * ripple.expand.remainingTime = (ripple.radius / ripple.duration) *
((ripple.radiusDuration / DOWN_PLAYBACK_RATE) - (currentTime)); ((ripple.duration / EXPAND_DOWN_PLAYBACK_RATE) - (currentTime));
} }
if (!ripple.fade) { if (!ripple.fade) {
@ -136,6 +136,6 @@ export class RippleActivator extends Activator {
} }
const TOUCH_DOWN_ACCEL = 512; const TOUCH_DOWN_ACCEL = 512;
const OPACITY_OUT_DURATION = 750; const EXPAND_DOWN_PLAYBACK_RATE = 0.45;
const EXPAND_OUT_PLAYBACK_RATE = 2.5; const EXPAND_OUT_PLAYBACK_RATE = 2.5;
const DOWN_PLAYBACK_RATE = 0.45; const OPACITY_OUT_DURATION = 750;

7
ionic/transitions/md-transition.ts
View File

@ -2,7 +2,6 @@ import {Transition} from './transition';
import {Animation} from '../animations/animation'; import {Animation} from '../animations/animation';
const DURATION = 300;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
const TRANSLATEY = 'translateY'; const TRANSLATEY = 'translateY';
@ -16,7 +15,7 @@ class MaterialTransition extends Transition {
super(nav, opts); super(nav, opts);
// global duration and easing for all child animations // global duration and easing for all child animations
this.duration(DURATION);
this.easing(EASING); this.easing(EASING);
// entering item moves in bottom to center // entering item moves in bottom to center
@ -38,6 +37,8 @@ class MaterialTransition extends Transition {
// set properties depending on direction // set properties depending on direction
if (opts.direction === 'back') { if (opts.direction === 'back') {
this.duration(500);
// back direction // back direction
this.enteringView this.enteringView
.from(TRANSLATEY, CENTER); .from(TRANSLATEY, CENTER);
@ -56,6 +57,8 @@ class MaterialTransition extends Transition {
} else { } else {
// forward direction // forward direction
this.duration(280);
this.enteringView this.enteringView
.from(TRANSLATEY, OFF_BOTTOM) .from(TRANSLATEY, OFF_BOTTOM)
.fadeIn(); .fadeIn();