Ionic实现动画与SVG的动态背景

xiaoxiao2021-02-28 129

最近我写了一些内容在SVG（可缩放矢量图形），主要是因为他们就是很炫酷效果吸引我。我已经创建的内容主要是介绍和漂亮的动画的话我一直使用简单的CSS动画和关键帧，所以我想解决一个更真实的问题和创造的东西，看起来真的很酷。

我想要创建的是一个应用程序的背景，它将有一个图形表示的时间或天气。它可能是中午和晴天，多云，夜间，甚至日落（有点像iOS上的默认天气应用）- SVG是一个完美的候选人。由于我们可以用JavaScript来操纵SVG的部分，我们可以从一个单一的SVG和修改它的飞行。如果原来的SVG是一个阳光灿烂的日子，在天空中的云，我们可以删除太阳和改变天空的颜色，使之成为夜间时间，或者我们可以移动到屏幕底部的太阳，使背景橙创建日落效应。

这就是我最终效果的展示：

这是一个相当基本的实现，但它很酷，对不对？在未来，我想延长这一点，以便它自动调整时间和天气，但现在它允许您切换之间的各种预定义的设置（白天，晚上，日落，多云）。在本教程中，我将通过如何使用SVG在ionic创建动态背景。我不会走过实际的SVG创作，只是修改它，所以如果你不熟悉SVG是如何创建的，我建议看第一个：SVG动画ionic。

1、创建新的ionic应用

我们将首先产生一个新的空白ionic应用程序，这样做只运行下面的命令：

ionic start ionic-sunset blank

一旦已经完成生成，你应该使它成为你的工作目录：

cd ionic-sunset

我们只是将SVG动画添加到自动生成的主页上，因此不再需要设置。

2、设置SVG

在我们做任何事情前，这是SVG看起来像插画：

将直接嵌入到应用程序中。

修改 src/pages/home/home.html :

<ion-content>

<defs>

<style>

.cls-1 {

fill: url(#linear-gradient);

}

.cls-2 {

fill: #fefbdf;

opacity: 0.07;

}

.cls-3 {

fill: #ffda71;

}

.cls-4, .cls-5 {

fill: #fff;

}

.cls-4 {

opacity: 0.95;

}

</style>

</linearGradient>

</defs>

<title>sunsetsvg</title>

</g>

</g>

</svg>

</ion-content>

让我们打破在SVG上面的重要组件。我们有一个直线渐变定义，我们使用的是天空–梯度过渡从蓝色到白色，让我们只是改变一种颜色（即改变蓝顶橙将日落的效果）。这种梯度并运用于sky-2矩形覆盖整个背景。接下来，我们有一组圆组成的太阳-有太阳本身，然后在太阳周围的一个较大的圆圈，给它一点辉光/镜头耀斑效应。然后我们有一组由自定义路径定义的三个云。我们将得到所有这些对象的引用，并以某种方式修改它们（它们的风格或位置）来达到我们想要的结果。

三.添加时间在我们开始操作SVG本身之前，我们将把时间叠加到SVG上，并设置一些样式。虽然没有太多的时间功能内置到应用程序中，我们将使用日期FNS包来帮助我们的时间格式。我没有很多时间玩日期FNS还，但它似乎是一个更轻的替代时刻进行时间管理。

安装日期FNS你将需要运行下面的命令。

npm install date-fns --save

然后，我们将建立在home.ts文件我们需要的一切。

修改 src/pages/home/home.ts:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import * as dateFns from 'date-fns';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

timeOfDay: Date = new Date();

timeString: string = '12:00';

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){

this.timeString = dateFns.format(this.timeOfDay, 'h:mm A');

}

我们从日期FNS包装进口的功能，然后我们用这个格式我们的约会对象转换成一个字符串，将看起来像这样：早上7:35。现在让我们添加到我们的模板。

修改 src/pages/home/home.html :

<ion-content>

<button color="light" ion-button (click)="setCloudy()">Cloudy</button>

<button color="light" ion-button (click)="setSunset()">Sunset</button>

<button color="light" ion-button (click)="setNight()">Night</button>

</div>

<defs>

<style>

.cls-1 {

fill: url(#linear-gradient);

}

.cls-2 {

fill: #fefbdf;

opacity: 0.07;

}

.cls-3 {

fill: #ffda71;

}

.cls-4, .cls-5 {

fill: #fff;

}

.cls-4 {

opacity: 0.95;

}

</style>

</linearGradient>

</defs>

<title>sunsetsvg</title>

</g>

</g>

</svg>

<div class="time">{{timeString}}</div>

</ion-content>

我们已经在底部添加了时间字符串，我们还增加了一些按钮来触发我们下一步将要创建的SVG函数。现在，我们只需要添加一个小造型，所以一切显示，因为它应该。

修改 src/pages/home/home.scss :

page-home {

.scroll-content {

display: flex;

align-items: center;

justify-content: center;

}

.time {

z-index: 1;

font-size: 3em;

font-weight: bold;

color: #fff;

text-shadow: 1px 1px 2px #8e8e8e;

}

.background {

position: absolute;

}

.controls {

position: absolute;

top: 10px;

z-index: 1;

opacity: 0.2;

}

修改 src/pages/home/home.ts:

import { Component, Renderer } from '@angular/core';

import { NavController } from 'ionic-angular';

import * as dateFns from 'date-fns';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

timeOfDay: Date = new Date();

timeString: string = '12:00';

sky: any;

entireSun: any;

allClouds: any;

clouds: any;

constructor(public navCtrl: NavController, public renderer: Renderer) {

}

ionViewDidLoad(){

this.timeString = dateFns.format(this.timeOfDay, 'h:mm A');

this.sky = document.querySelector('linearGradient [offset="1"]');

this.entireSun = document.querySelector('#Sun');

this.clouds = document.querySelectorAll('#Clouds path');

this.setTransitions();

}

setTransitions(){

this.renderer.setElementStyle(this.sky, 'transition', '1s linear');

this.renderer.setElementStyle(this.entireSun, 'transition', '1s linear');

this.clouds.forEach((cloud) => {

this.renderer.setElementStyle(cloud, 'transition', '1s linear');

});

}

setNight(){

this.renderer.setElementAttribute(this.sky, 'stop-color', '#141944');

this.renderer.setElementAttribute(this.entireSun, 'transform', 'translate(1, 2000)');

this.renderer.setElementAttribute(this.entireSun, 'opacity', '1');

this.clouds.forEach((cloud) => {

this.renderer.setElementStyle(cloud, 'fill', '#fff');

this.renderer.setElementStyle(cloud, 'opacity', '0.2');

});

}

setDay(){

this.renderer.setElementAttribute(this.sky, 'stop-color', '#50a7dd');

this.renderer.setElementAttribute(this.entireSun, 'opacity', '1');

this.renderer.setElementAttribute(this.entireSun, 'transform', 'translate(1, 1)');

this.clouds.forEach((cloud) => {

this.renderer.setElementStyle(cloud, 'fill', '#fff');

this.renderer.setElementStyle(cloud, 'opacity', '1');

});

}

setSunset(){

this.renderer.setElementAttribute(this.entireSun, 'transform', 'translate(1, 1000)');

this.renderer.setElementAttribute(this.entireSun, 'opacity', '1');

this.renderer.setElementAttribute(this.sky, 'stop-color', '#e2905a');

this.clouds.forEach((cloud) => {

this.renderer.setElementStyle(cloud, 'fill', '#e2c1d8');

this.renderer.setElementStyle(cloud, 'opacity', '0.4');

});

}

setCloudy(){

this.renderer.setElementAttribute(this.sky, 'stop-color', '#cecece');

this.renderer.setElementAttribute(this.entireSun, 'transform', 'translate(1, 1)');

this.renderer.setElementAttribute(this.entireSun, 'opacity', '0.2');

this.clouds.forEach((cloud) => {

this.renderer.setElementStyle(cloud, 'fill', '#fff');

this.renderer.setElementStyle(cloud, 'opacity', '1');

});

}

结论：当前的例子是非常简单的，这个例子是功能的演示，但不会做太多的效果展示。我相信你们有很多想法，可以实现更多的风格的天气更有趣的效果。

转载请注明原文地址: https://www.6miu.com/read-20027.html

技术

最新回复(0)