Question

我一直在搜索多个论坛来寻找解决此问题的方法-我试图编写多个Lottie动画，以便每个动画进入HTML网页上的浏览器窗口时播放。有人有可行的解决方案吗？

我尝试了使用Waypoint.js的解决方案，但不幸的是，使用该方法我无法获得多个动画。如果有人知道让Lottie和Waypoint一起好玩的方法，我将不胜感激。

我愿意接受任何脚本建议，即使它们要求我加载依赖项才能使它们起作用。任何帮助将不胜感激。另外，我应该注意，我是Lottie的新手，并且是动画师，因此，由于我是javascript的初学者，因此请留下详细的说明。

Answer 1

创建动画后，使用anim.goToAndStop(0)暂停动画：

const animData = ... // Let's pretend that you loaded this from a .json file
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.className = 'myAnimation';

// Create the animation
const anim = lottie.loadAnimation({
  renderer: 'canvas',
  loop: true,
  autoplay: false,
  rendererSettings: {
    context: ctx,
    scaleMode: 'noScale',
    clearCanvas: true,
  },
  animationData: animData,
});

// Go to the first frame and pause
anim.goToAndStop(0);

然后，您可以使用类似OnScreen（https://github.com/silvestreh/onScreen）之类的东西来检测动画何时可见：

import OnScreen from 'onscreen';
const os = new OnScreen();

os.on('enter', '.myAnimation', (element, event) => {
    anim.play(); // If animation becomes visible, play it
});

os.on('leave', '.myAnimation', (element, event) => {
    anim.goToAndStop(0); // If animation goes off screen, reset it
});

以上内容适用于单个动画，但稍作调整，便可以扩展到多个动画。

Answer 2

这是一个简单的解决方案：

Dialog dialog = new Dialog(MainActivity.this); dialog.setContentView(R.layout.activity_2); dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); final ImageView myImage = (ImageView) dialog.findViewById(R.id.imageView1); //here is the imageview dialog.show(); myImage.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN || event.getAction() == MotionEvent.ACTION_MOVE) { try { bitmap = myImage.getDrawingCache(); int pixel = bitmap.getPixel((int) event.getX(), (int) event.getY()); //getting RGB values int r = Color.red(pixel); int g = Color.green(pixel); int b = Color.blue(pixel); //getting Hex value String hex = "#" + Integer.toHexString(pixel); //set background color of view //mColorView.setBackgroundColor(Color.rgb(r,g,b)); System.out.println("r"+r+"g"+g+"b"+b); // Make the variable a global var easy way } catch(Exception e){ System.out.println("FOUT JONGUH"); } } return true; } });

var container = document.getElementById('graph_ani');
      animData = bodymovin.loadAnimation({
          container: container,
          renderer: 'svg',
          autoplay: false,
          loop: false,
          path : 'graph.json'
      });

可以使用一些工作仅在可见时播放，并在向下滚动时播放，并在向上滚动时反向播放，但对于快速摘要来说效果很好。

在HTML网页上滚动播放Lottie / Bodymovin动画

2 个答案: