用JavaScript函数模拟CSS动画

nhaq1z21 于 2023-03-28 发布在 Java

关注(0)|答案(1)|浏览(75)

我在CSS中有一个这样的动画

.outer {
  margin: 50px;
}

.inner{
  border: 1px solid black;
  border-radius: 3px;
  width: 100%;
  height: 30px;
  display: block;
  background: linear-gradient(to right, hotpink 50%, transparent 0);
  background-size: 200% 100%;
  background-position: right;
  animation: makeItfadeIn 3s 1s forwards;
}

@keyframes makeItfadeIn {
  100% {
    background-position: left;
  }
}

<div class="outer">
  <div class="inner">
  </div>
  <input type="range" value="20" min="0" max="100" class="inner"/>
</div>

我需要运行第二个动画，我从JavaScript控制。我想动画<input type='range' />的thumb。它需要从左向右滑动到某个位置。设置thumb的位置只能从JS端进行，因此动画也必须在JS中控制。
这很容易：但是，定位必须与在CSS中创建的动画完全同步运行。我可以检测到动画makeItfadeIn何时在CSS端开始，但是，如何在Javascript中构建一个函数，模仿animation: makeItfadeIn 3s 1s forwards;：开始时快，结束时慢下来，......所以range的thumb从value=0开始，并与hotpink条同步移动到value=100？

JavaScript

来源：https://stackoverflow.com/questions/75832882/mimic-css-animation-with-javascript-function

1条答案

按热度按时间

mcvgt66p1#

这是一个疯狂的旅程：）在https://github.com/gre/bezier-easing有一个很酷的库，我们可以用它来计算一个三次贝塞尔曲线的“Y轴”-然而，大量的警告我没有弄清楚如何实际转换命名曲线，如ease-in-out到实际数字-所以这 * 只 * 适用于自定义曲线，就像我在我的CSS目前。
X1 E1 F1 X的大量 prop

document.addEventListener("DOMContentLoaded", () => {
    const b = document.querySelector("b")
    const i = document.querySelector("input")
    const e = document.querySelector("span")
    const a = e.getAnimations()[0]
    const d = a.effect.getTiming().duration

    const atf = getComputedStyle(e)["animation-timing-function"].toString()

    console.log("Easing function", atf)
    const curveAsNumbers = atf.match(/[\d]+[.\d]*/g)

    const easing = BezierEasing(...curveAsNumbers);
    setInterval(() => {
        const easingFunctionX = (a.currentTime % d) / d
        const percent = easing(easingFunctionX)
        b.innerText = (percent*100).toFixed(0)
        i.value = Number(percent*100)
    }, 10)
})

span {
    display: inline-block;
    animation: rota 4s infinite cubic-bezier(1, 0.11, 0.95, 0.32);
}
@keyframes rota {
    0% {rotate: 0deg;}
    100% {rotate: 360deg;}
}

<script src="
https://cdn.jsdelivr.net/npm/bezier-easing@2.1.0/dist/bezier-easing.min.js
"></script>
<span>:D</span><input type="range" min="0" max="100">
<br>
Animation is <b></b>% done

赞(0）回复(0）举报 2023-03-28

我来回答

用JavaScript函数模拟CSS动画

1条答案

相关问题

热门标签

最新问答