百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

制作动画导航组件 - WotW ppt动画导航窗格

yuyutoo 2024-10-12 01:16 4 浏览 0 评论



欢迎阅读本周Widget系列,在这里我可以获取令人敬畏的UI / UX组件的GIF或视频,并通过代码将它们变为现实。

查看所有Widget of the Week文章并关注gitconnected以确保您不会错过任何小部件教程。

今天转向导航组件有四个彩色图标按钮。灵感来自此提交,它看起来像这样:


准备工作

对于今天的小部件,我们将使用Vue.js进行交互,使用TweenMax进行动画制作。如果你想跟随,你也可以依赖这个codepen模板。

我们还将使用FontAwesome图标,因此请确保添加此链接以导入它们:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

最初的标记

我们将从HTML开始。对于这个组件,我们只需要一个容器和按钮。正如我刚才提到的,我们将使用FontAwesome图标作为按钮,它们与原始提交中的图标不完全相同,但它们已经足够了。

<div id="app">
 <div class="btn-container">
 <div class="btn">
 <i class="fas fa-comment"></i>
 </div>
 <div class="btn">
 <i class="fas fa-user"></i>
 </div>
 <div class="btn">
 <i class="fas fa-map-marker"></i>
 </div>
 <div class="btn">
 <i class="fas fa-cog"></i>
 </div>
 </div>
</div>

现在我们应该有四个图标,是时候让它看起来更像是最终产品。

造型

在容器中我们需要背景颜色,我现在将使用黑色,但稍后我们将以编程方式更改它。此外,我将使用flex和justify-content使元素水平居中,然后只是一些填充垂直对齐它们。

.btn-container {
 display: flex;
 background-color: black;
 
 /* center vertically */
 padding-top: 150px;
 padding-bottom: 150px;
 /* center horizontally */
 justify-content: center;
}

对于按钮,需要更多的工作,我们将使用inline-block,以便它们彼此相邻。

我们需要定义按钮及其内容的大小以及一些默认颜色,然后使用边框半径使它们成为圆圈,还需要使用一些规则来正确对齐图标:

.btn {
 display: inline-block;
 cursor: pointer;
 width: 50px;
 height: 50px;
 margin: 5px;
 font-size: 25px;
 color: gray;
 
 /* Circles */
 border-radius: 25px;
 background-color: white;
 /* center icons */
 text-align: center;
 line-height: 50px;
 
 /* remove touch blue highlight on mobile */
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

现在我们应该有这样的事情:



行为

现在,在我们的Vue实例中,我们将开始声明我们需要在组件上使用的数据。使用颜色选择器,我为按钮和背景采用了不同的颜色,并将它们放在一个结构中,以便我们将来可以参考它们:

new Vue({
 el: '#app',
 data: {
 buttons: [
 {icon: 'comment', bgColor: '#DE9B00', color: '#EDB205'},
 {icon: 'user', bgColor: '#3EAF6F', color: '#4BD389'},
 {icon: 'map-marker', bgColor: '#BE0031', color: '#E61753'},
 {icon: 'cog', bgColor: '#8E00AC', color: '#B32DD2'}
 ],
 selectedBgColor: '#DE9B00',
 selectedId: 0
 },
})

此外,我已经声明了一个变量,它将具有当前背景颜色和所选按钮的ID。

由于我们在按钮数组中也有图标数据,因此我们可以将HTML代码更改为使用v-for按钮进行渲染并变得更加动态:

<div id="app">
 <div class="btn-container" :style="{'backgroundColor': selectedBgColor}">
 <div v-for="(button, index) in buttons" 
 :key="index" 
 @click="selectButton(index)"
 :ref="`button_${index}`"
 class="btn">
 <i :class="['fas', `fa-${button.icon}`]"></i>
 </div>
 </div>
</div>

此代码也已将背景颜色绑定到btn-containerdiv样式。



请注意,我们添加了一个@click应该触发调用函数的处理程序,selectButton该ref属性还可以帮助我们在需要为它们设置动画时引用按钮。

单击按钮

我们需要在Vue实例中首先声明selectButton方法:

// ... data,
 methods: {
 selectButton (id) {
 this.selectedId = id
 }
 }

在此之后selectedId,每次点击都会改变之间的值0-3,但这似乎对我们的组件没有任何作用。我们需要开始制作动画!

让我们开始动画最简单的部分,背景颜色。为此,我们需要创建一个计算属性来获取所选的按钮数据,这将有助于我们获得相应的背景颜色。

稍后当我们更改时,selectedId我们将能够将颜色补间到当前选定的颜色。

// ... data
 methods: {
 selectButton (id) {
 this.selectedId = id
 this.animateBgColor()
 },
 animateBgColor () {
 TweenMax.to(this, 0.2, {
 selectedBgColor: this.selectedButton.bgColor
 })
 }
 },
 computed: {
 selectedButton () {
 return this.buttons[this.selectedId]
 }
 }

单击任何按钮时,我们应该有背景颜色的工作转换。

动画按钮

按钮对动画来说会有点棘手。对于初学者,我们需要保存对先前活动按钮的引用和下一个要激活的按钮。

为了实现这一点,我们可以$refs在设置新按钮之前使用所选按钮的索引,如下所示:

// ... data
 methods: {
 selectButton (id) {
 const previousButton = this.$refs[`button_${this.selectedId}`]
 const nextButton = this.$refs[`button_${id}`]
 // ... rest of code

现在我们有了这些引用,我们应该能够运行几个方法,一个用于停用前一个按钮,另一个用于激活新按钮:

// ... methods
 selectButton (id) {
 const previousButton = this.$refs[`button_${this.selectedId}`]
 const nextButton = this.$refs[`button_${id}`]
 
 this.selectedId = id
 this.animateBgColor()
 
 this.animateOut(previousButton)
 this.animateIn(nextButton)
 },
 animateIn (btn) { 
 // TODO activate button
 },
 animateOut (btn) {
 // TODO deactivate button
 }

在编写该部分之前,我们需要停下来思考按钮应该如何设置动画。如果我们分析gif,按钮动画可以分为两个变化,一个用于按钮和图标的颜色,另一个用于按钮的宽度。

颜色过渡看起来非常简单,按钮的背景在不活动时变为白色,在活动时变为color属性。对于图标,它只是在gray和之间变化white。

有趣的是按钮宽度动画,它看起来有点“弹性”,因为它在结束时有点来回。

使用GSAP easy visualizer,我带来的道具与原始动画的缓和非常匹配。现在我们可以完成编码animateIn和animateOut方法:

// ... methods
 animateIn (btn) { 
 // animate icon & bg color
 TweenMax.to(btn, 0.3, {
 backgroundColor: this.selectedButton.color,
 color: 'white'
 })
 
 // animate button width
 TweenMax.to(btn, 0.7, {
 width: 100,
 ease: Elastic.easeOut.config(1, 0.5)
 })
 },
 animateOut (btn) {
 // animate icon color
 TweenMax.to(btn, 0.3, {
 backgroundColor: 'white',
 color: 'gray'
 })
 
 // animate button width
 TweenMax.to(btn, 0.7, {
 width: 50,
 ease: Elastic.easeOut.config(1, 0.5)
 })
 }
 },

我们差不多完成了,只有一个小细节。当应用程序启动时,组件看起来没有选定的按钮。幸运的是,可以通过调用钩子selectButton内的方法快速解决mounted:

mounted () {
 // initialize widget
 this.selectButton(0)
 }

现在最后的结果!

new Vue({
 el: '#app',
 data: {
 buttons: [{
 icon: 'comment',
 bgColor: '#DE9B00',
 color: '#EDB205'
 },
 {
 icon: 'user',
 bgColor: '#3EAF6F',
 color: '#4BD389'
 },
 {
 icon: 'map-marker',
 bgColor: '#BE0031',
 color: '#E61753'
 },
 {
 icon: 'cog',
 bgColor: '#8E00AC',
 color: '#B32DD2'
 }],
 selectedBgColor: '#DE9B00',
 selectedId: 0
 },
 methods: {
 selectButton(id) {
 const previousButton = this.$refs[`button_$ {
 this.selectedId
 }`] const nextButton = this.$refs[`button_$ {
 id
 }`]
 this.selectedId = id this.animateBgColor()
 this.animateOut(previousButton) this.animateIn(nextButton)
 },
 animateIn(btn) {
 // animate icon & bg color
 TweenMax.to(btn, 0.3, {
 backgroundColor: this.selectedButton.color,
 color: 'white'
 })
 // animate button width
 TweenMax.to(btn, 0.7, {
 width: 100,
 ease: Elastic.easeOut.config(1, 0.5)
 })
 },
 animateOut(btn) {
 // animate icon color
 TweenMax.to(btn, 0.3, {
 backgroundColor: 'white',
 color: 'gray'
 })
 // animate button width
 TweenMax.to(btn, 0.7, {
 width: 50,
 ease: Elastic.easeOut.config(1, 0.5)
 })
 },
 animateBgColor() {
 TweenMax.to(this, 0.2, {
 selectedBgColor: this.selectedButton.bgColor
 })
 }
 },
 computed: {
 selectedButton() {
 return this.buttons[this.selectedId]
 }
 },
 mounted() {
 // initialize widget
 this.selectButton(0)
 },
})

这就是本周的Widget

如果你渴望更多,你可以检查其他WotW:

?-? 流体布局

?-? 向导

?-? 动画卡片滑块

此外,如果您想要查看下周的特定小部件,请将其发布在评论部分中。

下周见,并按照gitconnected获取每周的小部件!

译自:https://levelup.gitconnected.com/making-an-animated-nav-component-wotw-e94b6bca04c4

相关推荐

野路子科技!2步教你把手机改造成一个FTP服务器,支持PC互传

哈喽,大家好,我是野路子科技,今天来给大家带来一个教程,希望大家喜欢。正如标题所言,就是教大家如何把售价改造成FTP服务器,而这个时候估计有朋友会问了,把手机改造成FTP服务器有什么用呢?现在有Q...

不得不看:别样于Server-U的群晖文件存储服务器的搭建与使用

我先前的作品中,有着关于Server-U的ftp文件存储服务器的搭建与访问的头条文章和西瓜视频,而且我们通过各种方式也给各位粉丝介绍了如何突破局域网实现真正意义上的公网访问机制技术。关于Server-...

Qt三种方式实现FTP上传功能_qt引入qftp库

FTP协议FTP的中文名称是“文件传输协议”,是FileTransferProtocol三个英文单词的缩写。FTP协议是TCP/IP协议组中的协议之一,其传输效率非常高,在网络上传输大的文件时,经...

Filezilla文件服务器搭建及客户端的使用

FileZilla是一个免费开源的FTP软件,分为客户端版本和服务器版本,具备所有的FTP软件功能。可控性、有条理的界面和管理多站点的简化方式使得Filezilla客户端版成为一个方便高效的FTP客户...

美能达柯美/震旦复印机FTP扫描怎么设置?

好多网友不知道怎么安装美能达/震旦复印机扫描,用得最多是SMB和FTP扫描,相对于SMB来说,FTP扫描安装步骤更为便捷,不容易出问题,不需要设置文件夹共享,所以小编推荐FTP来扫描以美能达机器为例详...

CCD(简易FTP服务器软件)_简单ftp服务器软件

CCD简易FTP服务器软件是一款很方便的FPT搭建工具,可以将我们的电脑快速变成一个FPT服务器。使用方法非常简单,只要运行软件就会自动生效,下载银行有该资源。该工具是不提供操作界面的,其他用户可以输...

Ubuntu系统搭建FTP服务器教程_ubuntu架设服务器

在Ubuntu系统上搭建FTP服务器是文件传输的一个非常实用方法,适合需要进行大量文件交换的场景。以下是一步步指导,帮助您在Ubuntu上成功搭建FTP服务器。1.安装vsftpd软件...

理光FTP扫描设置教程_理光ftp扫描设置方法

此教程主要用来解决WIN10系统下不能使用SMB文件夹扫描的问题,由于旧的SMB协议存在安全漏洞,所以微软在新的系统,WIN8/WIN10/SERVER201220162018里使用了新的SMB传...

纯小白如何利用wireshark学习网络技术

写在前面工欲善其事必先利其器!熟悉掌握一种神器对以后的工作必然是有帮助的,下面我将从简单的描述Wireshark的使用和自己思考去写,若有错误或不足还请批评指正。...

京东买13盘位32GB内存NAS:NAS系统安装设置教程

本内容来源于@什么值得买APP,观点仅代表作者本人|作者:yasden你没有看错,我在京东自营商城购买硬件,组装了一台13盘位,32GB内存的NAS,硬盘有13个盘位!CPU是AMD的5500!本文...

FileZilla搭建FTP服务器图解教程_filezilla server搭建ftp服务器

...

python教程之FTP相关操作_python ftps

ftplib类库常用相关操作importftplibftp=ftplib.FTP()ftp.set_debuglevel(2)#打开调试级别2,显示详细信息ftp.connect(“I...

xftp怎么用,xftp怎么用,具体使用方法

Xftp是一款界面化的ftp传输工具,用起来方便简单,这里为大家分享下Xftp怎么使用?希望能帮到有需要的朋友。IIS7服务器管理工具可以批量管理、定时上传下载、同步操作、数据备份、到期提醒、自动更新...

树莓派文件上传和下载,详细步骤设置FTP服务器

在本指南中,详细记录了如何在树莓Pi上设置FTP。设置FTP可以在网络上轻松地将文件传输到Pi上。FTP是文件传输协议的缩写,只是一种通过网络在两个设备之间传输文件的方法。还有一种额外的方法,你可以用...

win10电脑操作系统,怎么设置FTP?windows10系统设置FTP操作方法

打印,打印,扫描的日常操作是每一个办公工作人员的必需专业技能,要应用FTP作用扫描文件到电脑上,最先要必须一台可以接受文件的FTP服务器。许多软件都需要收费标准进行,但人们还可以应用Windows的系...

取消回复欢迎 发表评论: