[英]ionic ts part to can't correctly put JavaScript
I'm try to create like this example animated for my Ionic mobile application, I have small issue , actually this animated part not working for me, anyone know know how to put that script part correctly for Ionic, Please help me to fix that issue Thanks 我正在尝试为我的Ionic移动应用程序创建像这样的示例动画 ,我有一个小问题,实际上这个动画部分对我不起作用,任何人都知道如何正确地为Ionic放置该脚本部分,请帮助我解决该问题谢谢
this is my code sample my live code part without animated 这是我的代码示例, 我的实时代码部分没有动画
this is my code 这是我的代码
html 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 的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;
}
}
I want to know how to put this part correctly for 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);
}
I would create dedicated component like clap
我会创建
clap
专用组件
But first you need to add mojs
to your page 但是首先您需要向页面添加
mojs
<script src="https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.288.1/mo.min.js"></scrip>
Since we don't have typings for mojs you can just define it as any
: 由于我们没有mojs的类型,因此您可以将其定义为
any
:
declare let mojs: any;
(Note: you can create typings something like How to extend js class from outside library in TypeScript / Using mojs in TypeScript if you want) (注意:如果需要,您可以创建类似如何从TypeScript中的外部库扩展js类/在TypeScript中使用mojs之类的类型 )
Now it's time to create our custom component. 现在是时候创建我们的自定义组件了。
We're going to use ViewChild
instead of document.getElementById
to hold of reference to DOM element. 我们将使用
ViewChild
而不是document.getElementById
来保存对DOM元素的引用。 For that we need to put template references on elements ( <button #clap
). 为此,我们需要将模板引用放在元素上(
<button #clap
)。 We will use that references instead of selectors like el: '#clap--count-total',
so our component will be scope safed 我们将使用该引用而不是像
el: '#clap--count-total',
这样的选择器el: '#clap--count-total',
因此我们的组件将是范围安全的
Also we won't listen to dom events through .addEventListener
but rather via element output events like (click)
另外,我们不会通过
.addEventListener
来监听dom事件,而是通过元素输出事件(click)
如(click)
来监听
So here's the code 所以这是代码
clap.component.html 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 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);
}
}
As you can see there is no magic here. 如您所见,这里没有魔术。 It's simple component with two-way binding that we can use anywhere as follows:
它是具有双向绑定的简单组件,可以在以下任何地方使用:
home.html home.html
<clap [(claps)]="claps"></clap>
home.ts home.ts
export class HomePage {
claps = generateRandomNumber(500, 10000);
}
function generateRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.