Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

css3动画沿轨迹运动,css3物体沿圆环运动 #234

Open
confidence68 opened this issue Jan 19, 2017 · 0 comments
Open

css3动画沿轨迹运动,css3物体沿圆环运动 #234

confidence68 opened this issue Jan 19, 2017 · 0 comments
Labels

Comments

@confidence68
Copy link
Owner

confidence68 commented Jan 19, 2017

前言

我们在运用css3动画实现轨迹运动的时候,点 A 到点 B 的直线运动,很好实现,而且我们还可以运用贝塞尔曲线,实现运动速度的调整。但是假如我们要实现沿着某个路径运动,或者沿着圆环运动,那么应该如何实现呢?

实现方式一

每个轴执行自己的动画函数。效果如下:

http://sandbox.runjs.cn/show/4noyrqyq

实现代码如下:

<div class="haorooms-dot "></div>
<style>
    .haorooms-dot {
    	width:20px;
    	height:20px;
      -webkit-animation: xAxis 2.5s infinite ease-in;;
      animation: xAxis 2.5s infinite ease-in;
    	position:relative;
    		
    }
    
    .haorooms-dot::after {
      content: 'haorooms';
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 20px;
      background-color: #fff;
      -webkit-animation: yAxis 2.5s infinite ease-out;
      animation: yAxis 2.5s infinite ease-out;
    	position:absolute;
    }
    
    @-webkit-keyframes yAxis {
      50% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-transform: translateY(-150px);
        transform: translateY(-150px);
      }
    }
    
    @keyframes yAxis {
      50% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function:ease-out;
        -webkit-transform: translateY(-150px);
        transform: translateY(-150px);
      }
    }
    
    @-webkit-keyframes xAxis {
      50% {
        -webkit-animation-timing-function:ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: translateX(150px);
        transform: translateX(150px);
      }
    }
    
    @keyframes xAxis {
      50% {
        -webkit-animation-timing-function:ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: translateX(150px);
        transform: translateX(150px);
      }
    }
</style>

上面方法是运用2个元素叠加,一个沿着X轴方向,一个沿着Y轴方向。我们就得到了弧形路径。

实现方式二

也是运用叠加方式实现弧形运动,实现效果如下:

http://sandbox.runjs.cn/show/dgwbodgg

代码如下:

<div class="haorooms"> <em></em></div>
<style>
.haorooms{
  position: absolute; top: 50px; left: 50px;
  -webkit-animation: clockwise 1.5s linear infinite; animation: clockwise 1.5s linear  infinite ;
  transform-origin: 80px 80px;
}

.haorooms em {
    display: block;
    width: 40px; height: 40px;
    background: red;
	  color:fff;
    -webkit-animation: counter-clockwise 1.5s linear infinite; animation: counter-clockwise 1.5s linear  infinite ;
}

@-webkit-keyframes clockwise{
  0%  { -webkit-transform: rotate(0deg) ;  }
  100%{ -webkit-transform: rotate(360deg); }
}

@keyframes clockwise {
  0%  { transform: rotate(0deg) ; }
  100%{ transform: rotate(360deg); }
}

@-webkit-keyframes counter-clockwise {
  0%  { -webkit-transform: rotate(360deg) ;  }
  100%{ -webkit-transform: rotate(0deg); }
}

@keyframes counter-clockwise {
  0%  { transform: rotate(360deg) ;  }
  100%{ transform: rotate(0deg); }
}
</style>

2层叠加,可以让文字看起来不旋转。transform-origin ,可以指定旋转圆点的横坐标和纵坐标。

问题

按照上面,假如我们就想让一个元素从一个点,按照弧形,运动到另外一个点,然后就在另外那个点的地方停止。针对这个需求,我们应该如何实现呢?
就是如下效果:

http://sandbox.runjs.cn/show/1we2aaah

我们只需要把infinite 去掉,默认让其只执行一次!

那么如何 实现css3 使用animation 只执行一次然后停留在执行后的状态?

我们用到了如下参数:

animation-fill-mode:forwards;

forwards含义是设置对象状态为动画结束时的状态。加了这个参数之后,就可以实现我们想要的效果了!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant