Question

我尝试为我的Ionic移动应用程序创建这样的example animated，我有一个小问题，实际上这个动画部分不适合我，任何人都知道如何正确地将该脚本部分放入Ionic，请帮我解决这个问题谢谢

这是我的代码示例my live code part without animated

这是我的代码

HTML

<div class="claps">
  <button id="clap" class="clap">
  <span>
    <!--  SVG Created by Luis Durazo from the Noun Project  -->
    <svg id="clap--icon" xmlns="http://www.w3.org/2000/svg" viewBox="-549 338 100.1 125">
  <path d="M-471.2 366.8c1.2 1.1 1.9 2.6 2.3 4.1.4-.3.8-.5 1.2-.7 1-1.9.7-4.3-1-5.9-2-1.9-5.2-1.9-7.2.1l-.2.2c1.8.1 3.6.9 4.9 2.2zm-28.8 14c.4.9.7 1.9.8 3.1l16.5-16.9c.6-.6 1.4-1.1 2.1-1.5 1-1.9.7-4.4-.9-6-2-1.9-5.2-1.9-7.2.1l-15.5 15.9c2.3 2.2 3.1 3 4.2 5.3zm-38.9 39.7c-.1-8.9 3.2-17.2 9.4-23.6l18.6-19c.7-2 .5-4.1-.1-5.3-.8-1.8-1.3-2.3-3.6-4.5l-20.9 21.4c-10.6 10.8-11.2 27.6-2.3 39.3-.6-2.6-1-5.4-1.1-8.3z"/>
  <path d="M-527.2 399.1l20.9-21.4c2.2 2.2 2.7 2.6 3.5 4.5.8 1.8 1 5.4-1.6 8l-11.8 12.2c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l34-35c1.9-2 5.2-2.1 7.2-.1 2 1.9 2 5.2.1 7.2l-24.7 25.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l28.5-29.3c2-2 5.2-2 7.1-.1 2 1.9 2 5.1.1 7.1l-28.5 29.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.4 1.7 0l24.7-25.3c1.9-2 5.1-2.1 7.1-.1 2 1.9 2 5.2.1 7.2l-24.7 25.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l14.6-15c2-2 5.2-2 7.2-.1 2 2 2.1 5.2.1 7.2l-27.6 28.4c-11.6 11.9-30.6 12.2-42.5.6-12-11.7-12.2-30.8-.6-42.7m18.1-48.4l-.7 4.9-2.2-4.4m7.6.9l-3.7 3.4 1.2-4.8m5.5 4.7l-4.8 1.6 3.1-3.9"/>
</svg>
  </span>
  <span id="clap--count" class="clap--count"></span>
  <span id="clap--count-total" class="clap--count-total"></span>
</button>
  </div>

CSS

  $btn-dimension: 80px;
    $primary-color: rgba(189,195,199 ,1);
    $secondary-color: rgba(39,174,96 ,1);
    @mixin debug {
      outline: 1px solid red;
    }



    /*========================
        BASIC styles
      =======================*/
    * {
      box-sizing: border-box
    }
    .claps {margin-top: 10rem;margin-left: 5rem;}
    /*========================
        BUTTON styles
      =======================*/
    .clap {
      position: relative;
      outline: 1px solid transparent;
      border-radius: 50%;
      border: 1px solid $primary-color;
      width: $btn-dimension;
      height: $btn-dimension; 
      background: none;
      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        border-radius: 50%;
        //border: 1px solid $primary-color;
        width: $btn-dimension - 1px;
        height: $btn-dimension - 1px;
      }
      &:hover {
       cursor: pointer;
       border: 1px solid $secondary-color;
       transition: border-color 0.3s ease-in;
        &:after {
          animation: shockwave 1s ease-in infinite;
        } 
      }
      svg {
        width: 40px;
        fill: none;
        stroke: $secondary-color;
        stroke-width: 2px;
        &.checked {
          fill: $secondary-color;
          stroke: #fff;
          stroke-width: 1px;
        }
      }
      .clap--count {
        position: absolute;
        top: -$btn-dimension/1.6;
        left: $btn-dimension/4;
        font-size: 0.8rem;
        color: white;
        background: $secondary-color;
        border-radius: 50%;
        height: $btn-dimension/2;
        width: $btn-dimension/2;
        line-height: $btn-dimension/2;
      }
      .clap--count-total {
        position: absolute;
        font-size: 0.8rem;
        width: $btn-dimension;
        text-align: center;
        left: 0;
        top: -$btn-dimension/3.5;
        color: $primary-color; 
      }
    }



    /*====================
            Message
    ======================*/
    #message {
      position: absolute;
      bottom: 20px;
      color: $secondary-color;
      line-height: 1.52rem;
      padding: 1rem;
      font-size: 0.9rem;
      a {
        color: $primary-color
      }
    }
@keyframes shockwave {
  0% {
    transform: scale(1);
    box-shadow: 0 0 2px $secondary-color;
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
    box-shadow: 0 0 50px darken($secondary-color, 20%), inset 0 0 10px $secondary-color;
  }
}

我想知道如何正确地将这部分放入Ionic

const clap = document.getElementById('clap')
const clapIcon = document.getElementById('clap--icon')
const clapCount = document.getElementById('clap--count')
const clapTotalCount = document.getElementById('clap--count-total')
const initialNumberOfClaps = generateRandomNumber(500, 10000);
const btnDimension = 80
const tlDuration = 300
let numberOfClaps = 0
let clapHold;

const triangleBurst = new mojs.Burst({
  parent: clap,
  radius: {50:95},
  count: 5,
  angle: 30,
  children: {
    shape: 'polygon',
    radius: {6: 0},
    scale: 1,
    stroke: 'rgba(211,84,0 ,0.5)',
    strokeWidth: 2,
    angle: 210,
    delay: 30,
    speed: 0.2,
    easing: mojs.easing.bezier(0.1, 1, 0.3 ,1),
    duration: tlDuration
  } 
})
const circleBurst = new mojs.Burst({
  parent: clap,
  radius: {50:75},
  angle: 25,
  duration: tlDuration,
  children: {
    shape: 'circle',
    fill: 'rgba(149,165,166 ,0.5)',
    delay: 30,
    speed: 0.2,
    radius: {3: 0},
    easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
  }
})
const countAnimation = new mojs.Html({
  el: '#clap--count',
  isShowStart: false,
  isShowEnd: true,
  y: {0: -30},
  opacity: {0:1},
  duration: tlDuration
}).then({
  opacity: {1:0},
  y: -80,
  delay: tlDuration/2
})
const countTotalAnimation = new mojs.Html({
  el: '#clap--count-total',
  isShowStart: false,
  isShowEnd: true,
  opacity: {0:1},
  delay: 3*(tlDuration)/2,
  duration: tlDuration,
  y: {0: -3}
})
const scaleButton = new mojs.Html({
  el: '#clap',
  duration: tlDuration,
  scale: {1.3: 1},
  easing: mojs.easing.out
})
clap.style.transform = "scale(1, 1)" /*Bug1 fix*/

const animationTimeline = new mojs.Timeline()
animationTimeline.add([
  triangleBurst,
  circleBurst,
  countAnimation,
  countTotalAnimation,
  scaleButton
])


clap.addEventListener('click', function() {
   repeatClapping();
})

clap.addEventListener('mousedown', function() {
   clapHold = setInterval(function() {
   repeatClapping();
   }, 400)
})

clap.addEventListener('mouseup', function() {
 clearInterval(clapHold);
})


function repeatClapping() {
 updateNumberOfClaps()
 animationTimeline.replay()
 clapIcon.classList.add('checked')
}

function updateNumberOfClaps() {
  numberOfClaps < 50 ? numberOfClaps++ : null
  clapCount.innerHTML = "+" + numberOfClaps
  clapTotalCount.innerHTML = initialNumberOfClaps + numberOfClaps
}

function generateRandomNumber(min, max) {
  return Math.floor(Math.random()*(max-min+1)+min);
}

Answer 1

我会创建像clap

这样的专用组件

但首先您需要将mojs添加到您的网页

<script src="https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.288.1/mo.min.js"></scrip>

由于我们没有mojs的输入法，你只需将其定义为any：

declare let mojs: any;

（注意：如果需要，您可以创建类似How to extend js class from outside library in TypeScript / Using mojs in TypeScript的类型）

现在是时候创建自定义组件了。

我们将使用ViewChild而不是document.getElementById来保存对DOM元素的引用。为此，我们需要在元素（<button #clap）上放置模板引用。我们将使用该引用而不是像el: '#clap--count-total',这样的选择器，因此我们的组件将被范围保护

此外，我们不会通过.addEventListener收听dom事件，而是通过(click)

等元素输出事件

所以这是代码

<强> clap.component.html

<button #clap class="clap"
     (click)="repeatClapping()" 
     (mousedown)="onClapMouseDown()" 
     (mouseup)="onClapMouseUp()">
  <span>
    <svg [class.checked]="clapIconChecked" ...>
      ...
    </svg>
  </span>
  <span #clapCount class="clap--count">+{{currentClaps}}</span>
  <span #clapCountTotal class="clap--count-total">{{claps}}</span>
</button>

<强> clap.component.ts

import { Component, ElementRef, Input, OnInit, ViewChild, EventEmitter, Output } from '@angular/core';

declare let mojs: any;

@Component({
  selector: 'clap',
  templateUrl: './clap.component.html',
  styleUrls: ['./clap.component.css']
})
export class ClapComponent implements OnInit {

  @Input() claps = 0;

  @Input() tlDuration = 300;

  @Output() clapsChange = new EventEmitter();

  @ViewChild('clap') clapEl: ElementRef;

  @ViewChild('clapCount') clapCountEl: ElementRef;

  @ViewChild('clapCountTotal') clapCountTotalEl: ElementRef;

  currentClaps: number = 0;

  clapIconChecked = false;

  private animationTimeline: any;

  private clapHold: any;

  ngOnInit() {
    const triangleBurst = new mojs.Burst({
      parent: this.clapEl.nativeElement,
      radius: {50: 95},
      count: 5,
      angle: 30,
      children: {
        shape: 'polygon',
        radius: {6: 0},
        scale: 1,
        stroke: 'rgba(211,84,0 ,0.5)',
        strokeWidth: 2,
        angle: 210,
        delay: 30,
        speed: 0.2,
        easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
        duration: this.tlDuration
      }
    });

    const circleBurst = new mojs.Burst({
      parent: this.clapEl.nativeElement,
      radius: {50: 75},
      angle: 25,
      duration: this.tlDuration,
      children: {
        shape: 'circle',
        fill: 'rgba(149,165,166 ,0.5)',
        delay: 30,
        speed: 0.2,
        radius: {3: 0},
        easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
      }
    });

    const countAnimation = new mojs.Html({
      el: this.clapCountEl.nativeElement,
      isShowStart: false,
      isShowEnd: true,
      y: {0: -30},
      opacity: {0: 1},
      duration: this.tlDuration
    }).then({
      opacity: {1: 0},
      y: -80,
      delay: this.tlDuration / 2
    });

    const countTotalAnimation = new mojs.Html({
      el: this.clapCountTotalEl.nativeElement,
      isShowStart: false,
      isShowEnd: true,
      opacity: {0: 1},
      delay: 3 * (this.tlDuration) / 2,
      duration: this.tlDuration,
      y: {0: -3}
    });

    const scaleButton = new mojs.Html({
      el: this.clapEl.nativeElement,
      duration: this.tlDuration,
      scale: {1.3: 1},
      easing: mojs.easing.out
    });

    this.clapEl.nativeElement.style.transform = 'scale(1, 1)';

    this.animationTimeline = new mojs.Timeline();
    this.animationTimeline.add([
      triangleBurst,
      circleBurst,
      countAnimation,
      countTotalAnimation,
      scaleButton
    ]);
  } 

  repeatClapping() {
    if (this.currentClaps > 49) {
      alert('Limit 50 claps');
      return;
    }

    this.currentClaps++;
    this.claps++;
    this.clapsChange.emit(this.claps);

    this.animationTimeline.replay();
    this.clapIconChecked = true;
  }

  onClapMouseDown() {
    this.clapHold = setInterval(() => {
      this.repeatClapping();
    }, 400);
  }

  onClapMouseUp() {
    clearInterval(this.clapHold);
  }
}

正如你所看到的，这里没有魔力。它是具有双向绑定的简单组件，我们可以在任何地方使用，如下所示：

<强> home.html的

<clap [(claps)]="claps"></clap>

<强> home.ts

export class HomePage {
  claps = generateRandomNumber(500, 10000);
}

function generateRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

尝试 Example

离子ts部分无法正确放入JavaScript

1 个答案: