欢迎阅读本周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
本文暂时没有评论,来添加一个吧(●'◡'●)