每一次歌词完整版
在很多音乐APP中,我们可以歌词随着歌曲动态播放,其中也有一些歌词效果。那么在Axure 中,我们可以如何实现这种效果的呈现?作者分享了制作的方法,希望对你有所帮助。
![](https://p0.ssl.img.360kuai.com/t0118f3ab83286c2d10.jpg)
在许多的音乐播放软件的歌词播放页面中,歌词可以随着歌曲动态播放,呈现出类似下方的效果。
![](https://p0.ssl.img.360kuai.com/t01400f901b2f6d0534.gif)
接下来就来分享用 Axure 如何实现这样的效果。
一、用到的元件
首先在画布中拖入一个【文本段落】的元件,命名为【静态歌词】,然后放上需要播放的歌词。
![](https://p0.ssl.img.360kuai.com/t013d1d5dc0d3b06952.jpg)
接着复制这个文本段落,重新命名为【动态歌词】,然后给这个段落设置一个自己喜欢的颜色。
![](https://p0.ssl.img.360kuai.com/t01a16902372e6f74d8.jpg)
接着将【动态歌词】对齐放在【静态歌词】上方,完全盖住【静态歌词】,呈现出如下效果。
![](https://p0.ssl.img.360kuai.com/t010c5a438bad8f2450.jpg)
接着再把【动态歌词】的内容删掉,注意这里是删除内容,但元件还留在画布上,不能把元件给删掉了,最终的效果就是这样。
![](https://p0.ssl.img.360kuai.com/t01f41a23540baff476.jpg)
接下来在画布负空间拖入一个【动态面板】,命名为【播放控制器】。
![](https://p0.ssl.img.360kuai.com/t01049e539df0264adc.jpg)
【播放控制器】内需确保至少有两个状态。
![](https://p0.ssl.img.360kuai.com/t01589e5aedc1071018.jpg)
最后添加一个【全局变量】,变量名称为【Location】,默认值为【0】,变量的主要作用是用来实时记录当前歌词播放到哪个位置。
![](https://p0.ssl.img.360kuai.com/t01053fb893a6021c76.jpg)
这样准备工作就做完了。
二、播放的交互。
接下来写交互,实现歌词播放的效果。
歌词播放是一个循环的动作,这里会用到动态面板的循环事件,如果有不太懂这个事件的原理或用法的话,可以参考我之前分享过的文章《【Axure 教程】让你的动画变成“永动机”》。
首先给【播放控制器】添加【载入时】【设置面板状态】的交互,设置每隔200毫秒切换到下一个状态,这个时间就是歌词播放的速度。
![](https://p0.ssl.img.360kuai.com/t01d72ba13cde9ccf92.jpg)
接下来再给【播放控制器】添加【状态改变时】的交互,这是最核心的一步。
这里直接判断【动态歌词】和【静态歌词】两个元件的文字长度,如果不相等,表示歌词没显示完,这个时候每循环一次,就从【静态歌词】中选取一个字添加到【动态歌词】中。
![](https://p0.ssl.img.360kuai.com/t014a1f22faefa9bf5f.jpg)
从【静态歌词】添加文字到【动态歌词】中需要用到表达式,表达式内容如下。
![](https://p0.ssl.img.360kuai.com/t019f2b79a7f37e739a.jpg)
substr 可以按指定起始位置和长度来选取一段字符串中的文字,concat 用来向字符串追加指定文字,这个表达式的意思是:从【动态歌词】中选取一个字,添加到【静态歌词】中。
由于我们每次添加完一个字之后,下一次要添加的是之前已添加的字的下一个字,所以这里用到 Location 的变量来记录我们之前添加的是第几个字,默认值为0,表示初次添加的是第1个字,因此,每次添加之后,我们需要给 Location 加上1,这样进入下一次循环的时候,就会自动添加下一个字。
![](https://p0.ssl.img.360kuai.com/t01d38b847f407a001c.jpg)
最后如果两个元件的文字长度一致,表示歌词已经播放完了,这个时候就可以停止动态面板【播放控制器】的循环,并把 Location 重置为0。
![](https://p0.ssl.img.360kuai.com/t0196992ef514e7eb9a.jpg)
保存设置后预览就可以看到我们所需要的效果。
![](https://p0.ssl.img.360kuai.com/t01400f901b2f6d0534.gif)
如果你需要控制歌词的暂停与播放,只要通过控制【播放控制器】动态面板循环的循环与停止循环即可。
三、小彩蛋
按照我们刚刚的设计,如果你把【静态歌词】的元件隐藏掉,再次预览,就会得到类似打字输入的效果。
![](https://p0.ssl.img.360kuai.com/t01d5420ad76b972aa8.gif)
以上便是本文全部内容,感谢阅读。
专栏作家
产品锦李,公众号:产品锦李(ID:IMPM996),人人都是产品经理专栏作家。不务正业的产品经理和他的产品设计。
本文原创发布于人人都是产品经理,未经许可,禁止转载。
题图来自Unsplash,基于CC0协议。
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
","gnid":"90342ff2628da86d3","img_data":[{"flag":2,"img":[{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t0118f3ab83286c2d10.jpg","width":"900"},{"desc":"","height":"264","s_url":"https://p0.ssl.img.360kuai.com/t01400f901b2f6d0534_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t01400f901b2f6d0534.gif","width":"284"},{"desc":"","height":"385","title":"","url":"https://p0.ssl.img.360kuai.com/t013d1d5dc0d3b06952.jpg","width":"813"},{"desc":"","height":"398","title":"","url":"https://p0.ssl.img.360kuai.com/t01a16902372e6f74d8.jpg","width":"1051"},{"desc":"","height":"381","title":"","url":"https://p0.ssl.img.360kuai.com/t010c5a438bad8f2450.jpg","width":"787"},{"desc":"","height":"394","title":"","url":"https://p0.ssl.img.360kuai.com/t01f41a23540baff476.jpg","width":"804"},{"desc":"","height":"250","title":"","url":"https://p0.ssl.img.360kuai.com/t01049e539df0264adc.jpg","width":"548"},{"desc":"","height":"199","title":"","url":"https://p0.ssl.img.360kuai.com/t01589e5aedc1071018.jpg","width":"634"},{"desc":"","height":"392","title":"","url":"https://p0.ssl.img.360kuai.com/t01053fb893a6021c76.jpg","width":"616"},{"desc":"","height":"551","title":"","url":"https://p0.ssl.img.360kuai.com/t01d72ba13cde9ccf92.jpg","width":"868"},{"desc":"","height":"551","title":"","url":"https://p0.ssl.img.360kuai.com/t014a1f22faefa9bf5f.jpg","width":"868"},{"desc":"","height":"473","title":"","url":"https://p0.ssl.img.360kuai.com/t019f2b79a7f37e739a.jpg","width":"700"},{"desc":"","height":"551","title":"","url":"https://p0.ssl.img.360kuai.com/t01d38b847f407a001c.jpg","width":"868"},{"desc":"","height":"551","title":"","url":"https://p0.ssl.img.360kuai.com/t0196992ef514e7eb9a.jpg","width":"868"},{"desc":"","height":"264","s_url":"https://p0.ssl.img.360kuai.com/t01400f901b2f6d0534_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t01400f901b2f6d0534.gif","width":"284"},{"desc":"","height":"364","s_url":"https://p0.ssl.img.360kuai.com/t01d5420ad76b972aa8_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t01d5420ad76b972aa8.gif","width":"364"}]}],"original":0,"pat":"art_src_3,fts0,sts0","powerby":"hbase","pub_time":1681269420000,"pure":"","rawurl":"http://zm.news.so.com/0e1eb3d57b77e1c9ea1be9268c9d62ef","redirect":0,"rptid":"a503ae4ebc633439","rss_ext":[],"s":"t","src":"人人都是产品经理","tag":[],"title":"Axure 实现“动次打次”歌词播放效果
太种费2966《爱在春天》中的《每一次伤心》歌词要完整的,好的我给分 -
薛凌竖13668192934 ______ 每一次伤心 我的心是雨后的冷清, 我的泪被思念慢慢推醒. 你说梦如影随形, 为何我们无法靠近, 等到爱消失无踪影, 每一次伤心哭红了眼睛, 孤单总是陪着我,坐等天明. 每一次伤心像萧瑟的夜景, 寂寞演歌,谁来聆听.
太种费2966每一次 这是歌词 我不知道歌的名字 王力宏
薛凌竖13668192934 ______ 每一次和你分开,也叫做kiss goodbye 这里可以听.http://v.youku.com/v_show/id_cf00XNDQ4MzY0.html
太种费2966罗百吉每一次我看见你的时候歌词(狠好听) -
薛凌竖13668192934 ______ Everytime We Touch DJ Jerry 罗百吉每一次我想见你的时候 我只想与你分享所有的爱 你知不知道我的心 不停的跳动 一切都是为你 Come Now~ 每一次我想见你的时候 我只想与你分享所有的爱 你知不知道我的心 不停的跳动 一切都是为你 Come ...
太种费2966知几句歌词找歌名,第一句是:每一次...我知道...我终于... -
薛凌竖13668192934 ______ http://mp3.baidu.com/m?f=ms&rn=&tn=baidump3&ct=134217728&word=%D2%FE%D0%CE%B5%C4%B3%E1%B0%F2&lm=-1 歌曲:隐形的翅膀 歌手:张韶涵 专辑:潘朵拉 每一次 都在徘徊孤单中坚强 每一次 就算很受伤 也不闪泪光 我知道 我一直有双隐形的翅膀 带我飞 飞过绝望 不去想 他们拥有美丽的太阳 我看见 每天的夕阳 也会有变化 我知道 我一直有双隐形的翅膀 带我飞 给我希望 我终于 看到 所有梦想都开花 追逐的年轻 歌声多嘹亮 我终于 翱翔 用心凝望不害怕 哪里会有风 就飞多远吧 隐形的翅膀 让梦恒久比天长 留一个 愿望 让自己想象
太种费2966歌词里有“每一次”的一个男生唱的歌,节奏感很强,不是王力宏唱的 -
薛凌竖13668192934 ______ 你说的是王力宏的那首《Kiss Goodbye》吗? "每一次和你分开 深深的被你打败每一次放弃你的温柔 痛苦难以释怀 每一次和你分开 每一次kiss you goodbye 爱情的滋味此刻我终于最明白"
太种费2966每一次伤心歌词 -
薛凌竖13668192934 ______ 眼泪是魔鬼 歌手:蓝雨 专辑:最后一次的温柔 蓝雨-眼泪是魔鬼 词曲:野蘑菇 一滴惆怅泪一次伤悲 一颗心被敲碎 这份情支离破碎 再也不能完美 渺小的我们软弱的灵魂 聚与散是与非何时能 让你微笑不再伤心 不再流泪 每一次伤心又伤悲 伤神的眼泪 都是爱情路上的魔鬼 它紧紧抓住了灵魂无路可退 眼睁睁看着爱情撕碎 每一次撕心又裂肺 断肠的眼泪都是不可抵挡的魔鬼 软弱的我们又怎能够坚强面对 残缺的爱情如此的凄美 如果我的爱能让你体会 那幸福的滋味 不管多么难不管多么苦 我愿意为你去追
太种费2966歌词是 每一次...每一次..爱让一切都可能,让一切都发生.女的唱的,每次都听到,求解,谢谢! -
薛凌竖13668192934 ______ 深情 作词:庹丹丹 作曲:庹丹丹 每一次 看你转身 难舍难分 每一次 拥抱亲吻 我都希望这一切是永恒 每一次 睡梦中的人 弹著琴声说著爱有多麽真 爱让一切都可能 什麽都发生 专注的眼神 读懂我心的旅程 爱让彼此好心疼 彼此的温存 看我的眼神 忍不住爱你那麽深 每一次睡梦中的人 弹著琴声说著爱有多麽真 爱让一切都可能 什麽都发生 专注的眼神 读懂我心的旅程 爱让彼此好心疼 彼此的温存 看我的眼神 忍不住爱你那麽深 思念升温 对的人就注定不分 爱让一切都可能 什麽都发生 专注的眼神 读懂我心的旅程 爱让一切都可能 什麽都发生 专注的眼神 读懂我心的旅程 爱让彼此好心疼 彼此的温存 看我的眼神 忍不住爱你那麽深 我爱你那麽深
太种费2966那些歌词里有每一次??
薛凌竖13668192934 ______ kissgoodbye
太种费2966“每一次什么的、每一次什么什么”王力宏唱的、叫什么啊、歌词可以给吗? -
薛凌竖13668192934 ______ 是《kiss goodbye》,这首很不错的.再推荐几首,像《唯一》、《forever love》、《我们的歌》、《你不知道的事》都挺不错的.
太种费2966求歌词,歌名,大致歌词:每一次我们曾...每一次我们曾... -
薛凌竖13668192934 ______ 每一次我走近 总是那么悄悄地 不敢使你讶异 让你发觉自己是幻影 每一次我唤你 总是那么细细地 不让寂寞听到 嘲笑我用温柔的声音 每一次我离去 总是那么轻轻地 不敢将你惊醒 让你发觉醒在我梦里 每一次我等你 总是那么静静地 不让光阴知道 安慰我用无言的嘘息 一个一个想你的日子 砌成一栋孤单的房子 我在上楼下楼开门关门 翻着抽屉寻着你名字 一个一个想你的日子 从你回眸而去那天开始 我的日记写成诗 诗的背后寻到你名字 想着你的感觉 有如雨的缠绵 淋湿我的岁月 而我却依然不知不觉 想着你