作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我过渡到像这样的对象
.transition()
.duration(600)
.delay(function(d, i) { return (500 - (i * 40)); })
.ease(d3.easeBackInOut)
在文档中有不同的参数可以操纵像 backInOut(t, 3.0)
这样的缓动类型,但我不知道如何应用 t
和不同的振幅...有什么帮助吗?
最佳答案
在 d3.easeBackInOut
的特定情况下,您可以使用 overshoot()
设置振幅(在 API 中称为 overshoot ) >:
.ease(d3.easeBackInOut.overshoot(s))
//your value here----------------^
下面是一个使用 3
作为过冲的演示(默认值为 1.70158):
const svg = d3.select("svg");
svg.append("circle")
.attr("cx", 100)
.attr("cy", 50)
.attr("r", 10)
.style("stroke", "black")
.style("fill", "lightgray")
.transition()
.duration(2000)
.ease(d3.easeBackInOut.overshoot(3))
.attr("cx", 400);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="100"></svg>
顺便说一下,你不需要弄乱 t
。它的值从 0 到 1,自动传递给缓动函数。
关于javascript - 如何将单个参数应用于缓和过渡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54982871/
我是一名优秀的程序员,十分优秀!