标签: anime.js

我有一个SVG我试图用animejs动画.

基本上它是一个选择路径图.

我设法制作动画,但结果是错误的.

我要这个:

var lineDrawing = anime({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutCubic',
  duration: 4000,
  begin: function(anim) {
    document.querySelector('path').setAttribute("stroke", "#4a56f2");
    document.querySelector('path').setAttribute("fill", "none");
  },
  complete: function(anim) {
  },
  autoplay: false
});

document.querySelector('.play-drawing').onclick = lineDrawing.restart;

body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.2em;
}

#anime-demo {
  position: relative;
}

svg {
   padding: 10px;
}

button {
  background: orange;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Lato';
  cursor: pointer;
  border: none;
  outline: none;
}

button:hover {
  background: …

我喜欢animejs libary 形式：https : //github.com/juliangarnier/anime除了在Angular 项目的Ionic 中，它快速、清晰且易于实现。

我看过帖子：anime.js not working in Ionic 3 project but,它对我有用。

图像（我要动画的对象）没有动画。

有人有这个工作吗？并请分享一个解决方案？

到目前为止我所做的：

1. 使用 npm 安装animejs： package.json 更新为： "animejs": "^2.2.0"
2. Animejs 在 node_modules 中可用
3. 使用自定义复制库，anime.min.js 会加载到 index.html 中，请参阅：

    const existingConfig = require('../node_modules/@ionic/app-scripts/config/copy.config');
    module.exports = Object.assign(existingConfig, {
        copyFontawesomeFonts：{
          src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
          dest: '{{WWW}}/assets/fonts'
        },
        copyFontawesomeCss: {
          src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
          目标：'{{WWW}}/assets/css'
        },
        复制动画JS：{
          src: ['{{ROOT}}/node_modules/animejs/anime.min.js*'],
          目标：'{{WWW}}/assets/js'
        },
      }
    );

4. index.html 看起来像：

   ...

     <!-- Font-awesome -->
     <link href="assets/css/font-awesome.min.css" rel="stylesheet"/>
   
     <!-- Anime JS -->
     <link href="assets/js/anime.min.js" rel="stylesheet"/>
   

   Run Code Online (Sandbox Code Playgroud)

   ... …

注意：我最好在寻找 vanilla JS，因为 jQuery 不是我可以在这个项目中使用的东西

我有一个有点复杂的网格结构：

body {
  margin: 0;
  height: 100vh;
  text-align: center;
}

.grid-container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "tl tr" "bl br";
}

.tl {
  background: #fdfdfd;
  color: #2f2f2f;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: ". . . ." ". . text-tl ." ". . . button-tl";
  grid-area: tl;
}

.button-tl { 
  grid-area: button-tl;
  background: #2f2f2f;
  color: #fdfdfd;
}

.text-tl { 
  grid-area: text-tl;
} …

我想在Angular4项目中使用animejs.我一直在寻找一些提示和线索如何继续这个,但几乎没有任何地方.

所以我试图沿x坐标移动框...

animejs-logo.component.ts文件:

import { Component, OnInit } from '@angular/core';
import anime from 'animejs';

@Component({
  selector: 'app-animejs-logo',
  templateUrl: './animejs-logo.component.html',
  styleUrls: ['./animejs-logo.component.scss']
})
export class AnimejsLogoComponent {
  animation = anime({
    targets: ['.box'],
    translateX: [
      { value: 500, duration: 1000 },
      { value: 0, duration: 1000 }
    ],
    duration: 2000,
    loop: true
  });

  animate() {
    console.log('play');
    this.animation.play();
  }
}

animejs-logo.component.scss:

.box {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 4px;
}
.red { background-color: #f00; }
.green { background-color: #0f0; }
.blue …

我正在尝试学习如何创建类似于此动画的内容：https : //dribbble.com/shots/5311359-Diprella-Login

所以目前我遇到的问题是当我的案例中的“绿色”或“蓝色”扩展>移动>收缩时，我无法使用“宽度”获得相同的效果，因为它从右侧收缩，我希望它从左侧收缩移动后的一侧。

附上我的 CodePen：https ://codepen.io/MariusZMM/pen/jJWebK

使用的JS：

var start = anime.timeline({
  easing: 'easeInOutSine',
  autoplay: false
});

start
  .add({
    targets: '.square',
    width: 600,
    duration: 500
  })
  .add(
    {
      targets: '.square',
      translateX: 400,
      duration: 500
    },
    '-=100'
  )
  .add({
    targets: '.square',
    width: 400,
    duration: 500
  });

document.querySelector('.btn').onclick = function() {
  start.play();
  if (start.began) {
    start.reverse();
  }
};

我也尝试过使用 Padding 但我认为 AnimeJS 不喜欢值 0 0 0 300px

有什么方法可以在anime.js 中链接动画，或者我可以等待队列/动画组以继续执行其他动画？

我有一个关于将 导入anime.js到我的 vue 项目中的问题。我正在使用 vue cli。我如何包含animejs到我的项目中？我是这样试的：

import anime from 'animejs'
Vue.use(anime);

但我在控制台中收到一条错误消息：

未捕获的类型错误：a.hasOwnProperty 不是函数。. .

你们能帮帮我吗？

我是 Anime.js 的初学者。我对某些内容进行动画处理，动画完成后我想删除正在设置动画的元素。

动画效果完美。我只是无法删除正在工作的元素，而且我不想隐藏它

logoTimeline
.add({
        targets: text1,
        duration: 700,
        delay: function(el, index) { return index*50; },
        opacity: 1,

        easing: 'easeOutCirc',
        translateX: function(el, index) {
            return [(-50+index*10),0]
        },
        offset:0
    })
    .add({
        remove:text1
    })

更新的anime.js 文档（Controls->Seek）说你可以在滚动时控制动画，但是没有例子。

谁能举例说明如何设置animation.seek？

https://animejs.com/documentation/#seekAnim

var animation = anime({
  targets: '.seek-anim-demo .el',
  translateX: 270,
  delay: function(el, i) { return i * 100; },
  elasticity: 200,
  easing: 'easeInOutSine',
  autoplay: false
});

var seekProgressEl = document.querySelector('.seek-anim-demo .progress');
seekProgressEl.oninput = function() {
  animation.seek(animation.duration * (seekProgressEl.value / 100));
};

我正在尝试复制此链接中提到的动画。

http://tobiasahlin.com/moving-letters/#13

不同之处在于，一旦淡出和过渡动画完成，我需要更改内容并将其替换为新内容。

我尝试使用anime js's完整功能更改文本。

看看代码。

var styleindex = 0;
       var stylearray = ["SEO","SMM"];
       function eachletter(){
        $('.l1').each(function(){
              $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
          });
          }
          eachletter();
          anime.timeline({loop: true})
              .add({
              targets: '.l1 .letter',
              translateY: [100,0],
              translateZ: 0,
              opacity: [0,1],
              easing: "easeOutExpo",
              duration: 1400,
              delay: function(el, i) {
                  return 300 + 30 * i;
              }
          }).add({
              targets: '.l1 .letter',
              translateY: [0,-100],
              opacity: [1,0],
              easing: "easeInExpo",
              duration: 1200,
              delay: function(el, i) {
                  return 100 + 30 * i;
              },
               complete: function(anim) {
                   $(".l1").text(stylearray[styleindex]);
                    eachletter(); …