本文整理汇总了TypeScript中d3-interpolate.interpolate函数的典型用法代码示例。如果您正苦于以下问题：TypeScript interpolate函数的具体用法？TypeScript interpolate怎么用？TypeScript interpolate使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了interpolate函数的8个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: interpolate
export default <T extends object>(
{ startValue, endValue, onFinish }: TransitionOptions<T>,
onUpdate: Callback<T>,
) => {
const interp = interpolate(startValue, endValue);
onUpdate(interp(0));
onUpdate(interp(0.5));
onUpdate(interp(1));
onFinish();
};示例2: animateOnce
function animateOnce(fromValue: any, toValue: any, durationMs: number, onFrame: (t: number) => void) {
const interpolator = d3Interpolate.interpolate(fromValue, toValue);
const frameCount = Math.ceil(durationMs / 1000 * ANIMATION_FRAMERATE);
let frame = 1;
const setIntervalId = setInterval(() => {
onFrame(interpolator(d3Ease.easeCubicInOut(frame / frameCount)));
if (frame === frameCount) {
clearInterval(setIntervalId);
}
frame++;
}, durationMs / frameCount);
return () => { clearInterval(setIntervalId); };
}示例3: improviseGradientFromShorter
improviseGradientFromShorter(shortColors: Color[], numColors: number): Color[] {
const newColors = clone(shortColors)
while (newColors.length < numColors) {
for (let i = newColors.length - 1; i > 0; i -= 1) {
const startColor = rgb(newColors[i - 1])
const endColor = rgb(newColors[i])
const newColor = interpolate(startColor, endColor)(0.5)
newColors.splice(i, 0, newColor)
if (newColors.length >= numColors) break
}
}
return newColors
}示例4: interpolateArray
function interpolateArray(scaleArr: string[]) {
const N = scaleArr.length - 2 // -1 for spacings, -1 for number of interpolate fns
const intervalWidth = 1 / N
const intervals: Array<(t: number) => string> = []
for (let i = 0; i <= N; i++) {
intervals[i] = interpolate(rgb(scaleArr[i]), rgb(scaleArr[i + 1]))
}
return (t: number) => {
if (t < 0 || t > 1) throw new Error('Outside the allowed range of [0, 1]')
const i = Math.floor(t * N)
const intervalOffset = i * intervalWidth
return intervals[i](t / intervalWidth - intervalOffset / intervalWidth)
}
}示例5: interpolate
/**
* An animation function based on d3's interpolate.
* @returns an cancel() function
*/
export default function transition<T extends object>(
options: TransitionOptions<T>,
updateCallback: Callback<T>,
) {
const {
startValue,
endValue,
// Duration, in milliseconds
duration,
ease = 'easePolyInOut',
onFinish = _.noop,
} = options;
let start = 0;
const id: { current?: number } = {};
// Adapted from:
// https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
const interp = interpolate(startValue, endValue);
const step = (timestamp: number) => {
if (!start) {
start = timestamp;
}
const delta = timestamp - start;
const progress = Math.min(delta / duration, 1);
const currentValue = interp(d3[ease](progress));
updateCallback(currentValue);
if (delta < duration) {
id.current = requestAnimationFrame(step);
} else {
onFinish();
}
};
id.current = requestAnimationFrame(step);
return {
cancel() {
cancelAnimationFrame(id.current!);
},
};
}示例6: Date
iKeyVal: Interpolator<{ [key: string]: any }>,
iRGBColorObj: Interpolator<d3Color.RGBColor>,
iZoom: d3Interpolate.ZoomInterpolator;
let num: number,
str: string,
arrNum: number[],
arrStr: string[],
objKeyVal: { [key: string]: any },
objRGBColor: d3Color.RGBColor,
objHSVColor: d3Hsv.HSVColor,
zoom: [number, number, number];
// test interpolate(a, b) signature ----------------------------------------------------
iNum = d3Interpolate.interpolate('1', 5);
// color interpolator returning a color string
iString = d3Interpolate.interpolate('seagreen', d3Color.rgb(100, 100, 100));
iString = d3Interpolate.interpolate('seagreen', d3Hsv.hsv(60, 1, 0.2, 0.4));
iString = d3Interpolate.interpolate('seagreen', 'steelblue'); // as used with valid color name string
// date interpolator
iDate = d3Interpolate.interpolate(new Date(2016, 6, 1), new Date(2016, 6, 31));
// regular string interpolator interpolating number strings (as the strings are not valid color strings)
iString = d3Interpolate.interpolate(1, '5');
iString = d3Interpolate.interpolate('a: 1', 'a: 5');
iString = d3Interpolate.interpolate(new StringCoercible('a: 1'), 'a: 5');
示例7: return
return (d: any) => {
const interpolator = interpolate(start, target);
return (t) => {
return this.arcGenerator(interpolator(t));
}
};示例8: Date
let iRGBColorObj: Interpolator<d3Color.RGBColor>;
let iZoom: d3Interpolate.ZoomInterpolator;
let num: number;
let str: string;
let arrNum: number[];
let arrStr: string[];
let objKeyVal: { [key: string]: any };
let xyz: Xyz;
let objRGBColor: d3Color.RGBColor;
let zoom: [number, number, number];
// test interpolate(a, b) signature ----------------------------------------------------
// $ExpectError
iNum = d3Interpolate.interpolate('1', 5); // fails, https://github.com/Microsoft/TypeScript/issues/4002#issuecomment-124201510
// null and boolean interpolator
iNull = d3Interpolate.interpolate(null, null);
iNull = d3Interpolate.interpolate(10, null);
iBoolean = d3Interpolate.interpolate(false, true);
iBoolean = d3Interpolate.interpolate("10", true);
// color interpolator returning a color string
iString = d3Interpolate.interpolate('seagreen', d3Color.rgb(100, 100, 100));
iString = d3Interpolate.interpolate('seagreen', d3Hsv.hsv(60, 1, 0.2, 0.4));
iString = d3Interpolate.interpolate('seagreen', 'steelblue'); // as used with valid color name string
// date interpolator
iDate = d3Interpolate.interpolate(new Date(2016, 6, 1), new Date(2016, 6, 31));