CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-03-30 17:00:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add RatchetyInterpolator for breathe behavior

Browse Source 
The interpolator now just runs a few discrete steps, avoiding most of the
repainting that was causing high CPU and noisy laptop fans.  And it still
looks pretty good.

(closes #2911)
This commit is contained in:
Bryan Housel
2016-09-24 23:22:00 -04:00
parent ab1b5ad39c
commit b90c5459ab
1 changed files with 47 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
modules/behavior/breathe.js
View File

@@ -4,6 +4,7 @@ import _ from 'lodash';
export function Breathe() {
var duration = 800,
steps = 4,
selector = '.selected.shadow, .selected .shadow',
selected = d3.select(null),
classed = '',
@@ -12,6 +13,19 @@ export function Breathe() {
timer;
function ratchetyInterpolator(a, b, steps, units) {
a = parseFloat(a);
b = parseFloat(b);
var sample = d3.scaleQuantize()
.domain([0, 1])
.range(d3.quantize(d3.interpolateNumber(a, b), steps));
return function(t) {
return String(sample(t)) + (units || '');
};
}
function reset(selection) {
selection
.style('stroke-opacity', null)
@@ -22,11 +36,39 @@ export function Breathe() {
function setAnimationParams(transition, fromTo) {
var toFrom = (fromTo === 'from' ? 'to' : 'from');
transition
.style('stroke-opacity', function(d) { return params[d.id][fromTo].opacity; })
.style('stroke-width', function(d) { return params[d.id][fromTo].width; })
.style('fill-opacity', function(d) { return params[d.id][fromTo].opacity; })
.style('r', function(d) { return params[d.id][fromTo].width; });
.styleTween('stroke-opacity', function(d) {
return ratchetyInterpolator(
params[d.id][toFrom].opacity,
params[d.id][fromTo].opacity,
steps
);
})
.styleTween('stroke-width', function(d) {
return ratchetyInterpolator(
params[d.id][toFrom].width,
params[d.id][fromTo].width,
steps,
'px'
);
})
.styleTween('fill-opacity', function(d) {
return ratchetyInterpolator(
params[d.id][toFrom].opacity,
params[d.id][fromTo].opacity,
steps
);
})
.styleTween('r', function(d) {
return ratchetyInterpolator(
params[d.id][toFrom].width,
params[d.id][fromTo].width,
steps,
'px'
);
});
}
@@ -60,7 +102,7 @@ export function Breathe() {
function run(surface, fromTo) {
var toFrom = (fromTo === 'from' ? 'to': 'from'),
var toFrom = (fromTo === 'from' ? 'to' : 'from'),
currSelected = surface.selectAll(selector),
currClassed = surface.attr('class');