View unanswered posts | View active topics It is currently 2020-08-04 10:27



Reply to topic  [ 4 posts ] 
 twaver.animate.AnimateCenterLocation问题 
Author Message
新手上路

Joined: 2020-06-18 7:19
Posts: 23
Post twaver.animate.AnimateCenterLocation问题
想实现一个轮播效果,让一组节点动态轮播,鼠标上移轮播停止,鼠标点击左右可以控制轮播的功能,看到有AnimateCenterLocation方法,但是不知道怎么使用!能给个使用的例子吗?


2020-07-08 9:07
Profile
TWaver开发组
User avatar

Joined: 2019-04-23 11:02
Posts: 88
Post Re: twaver.animate.AnimateCenterLocation问题
其实只要使用 动画对象twaver.Animate 使网元动起来就可以了
参考:
Code:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="../lib/twaver.js"></script>
    <script>
      var box = new twaver.ElementBox();
      var network = new twaver.vector.Network(box);
      network.adjustBounds({ x: 0, y: 0, width: 400, height: 300 });
      var node = new twaver.Node({ name: "a", location: { x: 100, y: 100 } });
      box.add(node);
      new twaver.Animate({
        from: { x: 100, y: 100 },
        to: { x: 200, y: 100 },
        type: "point",
        delay: 1000,
        dur: 1000,
        easing: "easeNone",
        onUpdate: function(value) {
          node.setLocation(value.x, value.y);
        }
      }).play();
      function init() {
        document.querySelector(".div1").appendChild(network.getView());
       
      }
    </script>
    <style>
      .div1 {
        width: 400px;
        height: 300px;
        border: 1px solid red;
        margin-bottom: 10px;
        position: relative;
      }
    </style>
  </head>

  <body onload="init()">
    <div class="div1" onload="init1()"></div>
  </body>
</html>


2020-07-08 16:21
Profile
新手上路

Joined: 2020-06-18 7:19
Posts: 23
Post Re: twaver.animate.AnimateCenterLocation问题
您给的这个方案是可行的,只是当同时移动多个节点的时候,通过循环添加animate事件时可能会出现细微的不同步,我是看到有 twaver.animate.AnimateCenterLocation这样一个批量处理的方法,所以询问一下这个类的使用方法


2020-07-10 10:29
Profile
TWaver开发组
User avatar

Joined: 2019-04-23 11:02
Posts: 88
Post Re: twaver.animate.AnimateCenterLocation问题
不要考虑 twaver.animate.AnimateCenterLocation 方法了, 那个解决不了你的问题,
demo只是一个参考,移动多个节点不需要每创建一个node就new 一个animate,
在onUpdate方法中 便利所有节点来setlocation是一样的效果,如果喜欢定位中心可以使用setCenterLocation;
animate的参数也不一定是点到点(point),详见api。


2020-07-10 14:37
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 4 posts ] 

Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron