如何将这个无法识别的 CSS 功能转换为 javascript？

Question

我遇到了这个问题，我试图根据时间移动 CSS 图像，但由于它在 CSS 中，所以无法使用它。特征不是太阳，而是在这个pen 中可以看到的黄色半圆动画。我正在尝试将该半圆应用于完全随机的形状。

例如，如果形状是完全随机的并且在白色画布上并且中间有一个随机变形的圆圈，那么如何使用与pen 中看到的相同的动画填充该圆圈以及如何转换将 CSS 转换为 javascript 或如何控制 CSS，因为在设置某些值时它必须停止和移动。

我不指望有人会做所有事情，而是可能会在我需要使用那支笔中的黄色功能时帮助我应该从哪里开始。

谢谢。

事情就是这样。

<div class="sunmoon">
    <h2>Sun &amp; Moon</h2>
    <div class="sun-times">
        <div class="sun-path">
            <div class="sun-animation"></div>
        </div>
        <div class="sun-symbol-path"><span class="symbol">☀</span></div>
    </div>
    <div class="legend">
        <div class="sunrise">05:30 AM</div>
        <div class="sunset">8:04 PM</div>
    </div>
    <div class="clear">&nbsp;</div>
</div>

<div class="controls">
  <button class="start">Start</button>
  <button class="reset">Reset</button>
</div>

@import "compass/css3";


$arc-diameter: 170px;

.sunmoon {
    position: relative;
    & > div {
        margin-left: 10px
    }
}


.sun-times {
    margin-top: 40px;
    width: 230px;
    height: 60px;
    border-bottom: 1px solid #999;
    overflow-y: hidden;

    .sun-path {
        margin-left: 25px;
        width: $arc-diameter;
        height: $arc-diameter;
        overflow: hidden;
        border: 1px dashed #999;
        border-radius: 50%;
    }

    .sun-symbol-path {
        position: absolute;
        color: yellow;
        text-shadow: 0 0 5px black;
        height: $arc-diameter / 2;
        -webkit-transition: -webkit-transform 2s linear;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: rotateZ(-75deg);
        left: ($arc-diameter / 2) + 25px;
        bottom: 0;

        .symbol {
            position: relative;
            font-size: 16px;
            top: -8px;
        }
    } 

    .sun-animation {
        width: 0px;
        height: 150px;
        background-color: rgba(255, 255, 0, 0.4);
        -webkit-transition: width 2s linear;
        transition: width 2s linear;
    }
}


.legend {
    position: absolute;
    bottom: 1em;

    & > div {
        position: absolute;
        font-size: 12px;
        width: 80px;
    }

    .sunrise {
        left: 15px;
    }

    .sunset {
        left: 185px;
    }
}

body {
  background-image: url(foo);
  background-color: #ccc;
  font-family: Helvetica, Sans serif;
  h2 {
    font-size: 20px;
  }
}

.controls {
  margin-top: 50px;
}




$('.start').click(function () {
    $('.sunmoon .sun-animation').css('width', '70%');
    $('.sun-symbol-path').css('-webkit-transform', 'rotateZ(27deg)');
        // TODO: mention that this isn't nice
        // city.find('.sunmoon .sun-animation').css('-webkit-transform',    'scaleX(50)');
    return false;
});

$('.reset').click(function () {
    $('.sun-animation').css('width', '0%');
    $('.sun-symbol-path').css('-webkit-transform', 'rotateZ(-75deg)');
    return false;
});

Answer 1

您可以在 Illustrator 中创建一个形状，内部透明，外部为您想要的颜色，并设置另一个框（使用新颜色，在本例中为黄色，形状的宽度相同），在该形状下方（例如使用z-index）与position:absolute 和left:-100%，然后单击，开始和停止向右的过渡。

我会推荐你​​使用GSAP TimeLineMax。它可以让您通过其功能播放和停止过渡，例如：

    //off course after document load.
    let animation = new TimelineMax();
    animation
     .to(
          ".underneath-box", //box class
          10, //seconds
          { 
            left:"100%", //100% of the width
            ease: Power4.easeInOut //ease effect.
          });

    animation.pause(); //To prevent start.

    $('start-button').click(function(){ //on start button click
        animation.play().timeScale(1); //start animation
    });


    $('reset-button').click(function(){ //on reset button click
        animation.reverse().timeScale(2); //reverse the entire animation
    });

我假设您了解一些 Html 和 css 基础知识。不要忘记用它的类创建那些 div 和按钮。干杯。

Answer 2

嗯，解决这个问题我玩得很开心。不确定那是你想要的，但这是我所拥有的。纯 JS。

var c1 = document.getElementById("canvas1");
var c2 = document.getElementById("canvas2");

var ctx = c1.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 90, 0, 2 * Math.PI);
ctx.lineWidth = 2;
ctx.stroke();

animateCanvas();

function animateCanvas(){
  var w = 0;
  var timer = setInterval(function(){
    c2.width = w;
    w += 1;
        var ctx = c2.getContext("2d");
        ctx.beginPath();
        ctx.arc(100, 100, 89, 0, 2 * Math.PI);
        ctx.fillStyle = "#efba32";
        ctx.fill();
    if (w===200){clearInterval(timer)}
  }, 20);
}

.canvases{
  position: absolute;
  top: 0;
  left: 0;
}

<canvas id="canvas1" class="canvases" width="200" height="200"></canvas>
<canvas id="canvas2" class="canvases" width="200" height="200"></canvas>

Answer 3

您附加的示例使用两个 div，一个外部和一个内部，来创建这种效果。外部 div 有一个边框半径属性，使它看起来像一个半圆。内部 div 是一个普通矩形，溢出设置为隐藏。因此，该脚本通过将内部 div 的宽度从外部 div 的 0% 变为 70% 的动画来创建向右擦拭的视觉错觉。要使这种错觉适用于多边形，您需要使用诸如剪辑路径之类的东西而不是边框​​半径。

这是一个任意多边形的示例，它将用不同的背景颜色向右擦除。 HTML：

<div>
<div class="outer"><div class="inner"></div></div>
</div>

CSS：

.outer { 
  margin-left:200px;
  background-color: lightgray;
  width: 300px;
  height: 100px;
  display: block;
  overflow: hidden;
  -moz-clip-path: polygon(0px 0px, 300px 0px, 300px 300px);
  -webkit-clip-path: polygon(0px 0px, 300px 0px, 300px 300px);
  clip-path: polygon(0px 0px, 300px 0px, 300px 300px);
}
.inner  {
  background-color: red;
  width :0;
  height: 300px;
  display: block;
}

jQuery:

$('.outer').click(function() {
    $('.inner').animate({width:"150px"}, 1800)
}); 

这是一个有效的小提琴：https://jsfiddle.net/r93pocgt/

当您单击外部 div 时，我的实现使用 jQuery 的动画来更改宽度的 CSS 属性。我已尽我所能简化它，以明确什么在做什么。