微信-弹幕是怎么搞出来的,看svg!

微信 专栏收录该内容
1 篇文章 0 订阅

最近经常看到微信推送的文章最后会来个弹幕,作为技术爱好者,看着评论里面各种评价,弹幕效果好厉害,求技术男神联系方式啥的。。。本来呢,我是个很淡泊而又单薄的人是吧,我绝对没有羡慕嫉妒恨啊!(即使是妹子们的评价我也没有羡慕嫉妒恨啊!)
下面是正文:
1.我的第一反应这不就是marquee么,不是都被淘汰了么。。。。

<marquee>123123 </marquee>

(大家自己找个微信在线编辑器,点击html在源代码里面插入就行就像这个样
就这么简单,他就奔跑了!
切换回在线效果页面,复制粘贴,丢到微信的素材编辑里面,他也的确可以跑,接着问题来了。。。
预览到手机,他不动了。。。还是图样图森破啊!

2.svg
什么是svg呢?svg为什么就能在手机上面跑呢?svg怎么搞呢?
这时候就需要我们的启蒙老师了w3cschool是吧!

来看看上面是怎么写的:
HTML5 支持内联 SVG。
什么是SVG?
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

这两段话就很重要了,HTML5支持内联svg是吧:手机页面&&html5,是吧,解决一个问题。
svg是用来画图的,实际上也的确如此。看看w3上面的例子,很多就是告诉你如果画一个圆,如何画一个长方形,如何上色。。。看到后面,你会发现他告诉你可以上渐变色,上面叫渐变色,就是起点到终点的色值是逐渐变化的,有点感觉没有。有起点,有终点,有渐变,理论上推下来,既然能够颜色变,能不能位置变,大小变呢?

下面就w3上面的例子来看看怎么搞:

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
    <g transform="translate(100,100)">
    <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> It's SVG!
    <animateMotion path="M 0 0 L 100 100" dur="5s" fill="freeze">
    </animateMotion>
    </text>
    </g>
    </svg>

1.xml规则

2.svg标签 xmlns 属性可定义 SVG 命名空间(向html中引入svg元素),width,height宽高(一般微信宽可以设置100%,高度的话就视需求所定,毕竟这次讲弹幕,弹幕也不会说很高,对吧。)

3.g标签类似于div,但是不要用div(有兴趣的可以研究一下g标签的属性,弹幕这里可以不设置属性,就是 < g>< /g> 就可以了)

4.text 标签包含了两个内容,一个是文本 It’s SVG! ,还有一个animateMotion标签
文本好理解,也就是你们弹幕的内容,还有一个animateMotion就是控制动画效果的我们后面讲;这里说一下text标签的属性,id是非必须的。x,y表示坐标,style里面可以设置字体,但是,但是,但是设置不了文字颜色!!这里要讲一个属性:fill,fill=”##BC1717”这样设置颜色。另外,可以使用font-family、font-size、font-weight属性设置字体。到此,我们弹幕的子弹就可以准备完毕了,下面就是怎么样让子弹飞起来了。

5.animateMotion标签,animate就是动画的意思,我们这里呢,实际是有这个animate标签的,我待会儿再说,先把这个官方例子讲完。
path属性,很好理解,就是路径,M起点,L直线运动到,字母后面的两个数字分别表示x,y坐标,很好理解吧。
dur属性:duration,就是这个动画过程持续的时间,注意是持续的时间,是一次完成需要的时间,也就是周期,这个是和marquee不一样的地方啊。数值越小是越快的,是吧,而弹幕的速度一般都是不一样的,这个大家就调节一下这个dur的值,记得带单位。
回到我们的例子,这个例子其实是斜线运动的,弹幕一般是从屏幕右边到左边是吧,我们设计的原点坐标一般是左上角为 0 0 对吧,所以要相应的修改为类似的,M 200 0 L 0 0(这只是示例一下啊 ,因为这个弹幕的错乱的感觉不光是速度不同啊。而且这个起点有时候也是不一样的,能够理解啊,大家试试怎么样才能更凌乱吧,让子弹非得更嗨!)
后面的fill属性值freeze,表示运动一次之后就定住了。和我们的需求不一样对吧,我们是需要他不断重复运动的。其实,还有个属性这个例子没有展现出来,叫做repeatCount:重复多少次,设置为indefinite,就是无限次,也就是不断重复了。
到目前为止,弹幕是可以做出来的,下面就接着讲一下之前提到过的animate标签

6.animate标签,这个单词就是有动画的意思,而且少了motion运动这个单词,实际上已经暗示了这个标签的作用不仅仅是变化位置。大家看下下面这个代码,

    <svg width="100%" height="250" xmlns="http://www.w3.org/2000/svg">
        <g>
        <text font-family="microsoft yahei,sans-serif" font-size="15" y="50" x="200" fill="#5F9F9F">内容2
        <animate attributeName="x" from="100%" to="-200" begin="0.5s" dur="3.7s" repeatCount="indefinite"></animate>
        </text>
        </g>
    </svg>
不详细讲了,这里animate标签可以选取text当中的属性值,让其从(from)一个值变化为(to)另外一个值,
begin是设置动画从页面加载之后多久开始的(时间除了有长短,还有起点对吧)。

总结一下吧,
1.svg其实是一个作图方式,可以单独存为.svg的文件,也可以引入到html中(xlmns)
2.语法结构,成对标签,svg最外层,g包含所有,text包含文本以及动画效果
3.animate是动画的最小单元,一个text可以包含多个动画(如:位置,颜色,大小等等)
4.注意:颜色text的fill属性,可以设置开始时间animate的begin属性,快慢:animate的dur属性(值越小越快),
无限循环:animate的repeatCount设置为indefinite
5.记得点赞!
  • 4
    点赞
  • 0
    评论
  • 2
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

年糕大侠

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值