笑的咪咪青藤

笑的咪咪青藤 查看完整档案

成都编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

笑的咪咪青藤 发布了文章 · 2019-12-12

自定义图像沿svg路径运动

平时经常会用到svg,都是用工具生成,直接拿来用。当项目要用到自定义图像做路径运动的时候就需要自己动手手辣。
这几天做项目常用到这几个效果,写一个文章归纳。
6e24ada9-2718-4d4a-bc0d-bcc8e6064f62.png

我们康康示例效果


二次贝塞尔曲线

svg2.gif

三次次贝塞尔曲线

svg.gif
微信截图_20191212103818.png

回顾svg贝塞尔曲线指令


二次贝塞尔曲线

Q x1 y1 x y ;(x1,y1)是控制点,(x,y)代表曲线的终点。

三次贝塞尔曲线指令

Cx1 y1, x2 y2; (x1,y1)和(x2,y2)分别是两个控制点,(x,y)代表曲线的终点。
网上资料很多哒,不足自己去找找哈

入正题写代码


自定义一个图像 也就是例子中运动的小球
<defs>
    <pattern id="imgpattern" x="0" y="0" width="40" height="40">
        <image width="40" 
            height="40"
            xlinkHref="data:image/svg+xml;base64,此处是一个svg格式的base64图片哦" />
    </pattern>
</defs>

<defs>标签内定义图案;
<pattern>是一个填充标签;元素中的内容直到引用的时候才会显示,<pattern>标签里面必须定义一个id,这个id是你后面要引用的地方需要使用的你也可以定义宽度高度;
<image>是我例子中运动的小球,好像必须要转成base64才可以,我直接用的图片路径不行啊...让我在康康...如果不需要图片,你也可以使用<text>或者 <circle> 等等,看起来很简单但是。。。![
微信截图_20191212105649.png](/img/bVbBop4)查了好久的资料。。最后在一个英文文档中看见,但是看了以后链接就没有存上。

定义padth

自定义的图我们也定义好啦,那就写path啦
我们看三次贝塞尔曲线中的例子,有12根线,那就需要一个起点,终点还有两个控制点啦
微信截图_20191212110147.png
因为例子中的球有12根线,我们用代码生成吧

// getElementPosition是自定义获取dom的位置的方法
svgChart = () => {
    let beginPoint = getElementPosition(this.beginPoint); // 起点
    let endPoint = getElementPosition(this.endPoint); // 终点dom 
    let lines = [];
    for (let i = 0; i < 12; i++) {
        lines.push({
            name: `path${i}`,
            path: [
                [endPoint.x, endPoint.y],
                [-65 + (50 * i), 180], // 控制点1
                [-65 + (50 * i), 28], // 控制点2
                [beginPoint.x, beginPoint.y]
            ],
            lineStyle: {
                fill: 'transparent',
                stroke: '#006ecf',
                strokeWidth: 1
            }
        });
        this.setState({ lines });
    }
}
<div className={styles.arthTurn} ref={c => this.svgContent = c}>
        <svg
            width="100%"
            height="100%"
            version="1.1">
            <defs>
                <pattern id="imgpattern" x="0" y="0" width="40" height="40">
                    <image width="40" height="40"
                        xlinkHref="此处是一个svg格式的base64图片哦" />
                </pattern>
            </defs>
            {
                lines.map((d, index) => {
                    let path = [];
                    d.path.forEach((p, i) => {
                        switch (i) {
                            case 0:
                                p = `M${p[0]},${p[1]}`;
                                break;
                            case 1:
                                p = `C${p[0]},${p[1]}`;
                                break;
                            case 2:
                                p = `${p[0]},${p[1]}`;
                                break;
                            case 3:
                                p = `${p[0]},${p[1]}`;
                                break;
                        }
                        path.push(p);
                    });
                    path = path.join(' ');
                    const { fill = 'transparent', stroke = '#000', strokeWidth = 2 } = d.lineStyle || {};
                    return (
                        <Fragment>
                            <path
                                key={d.id}
                                fill={fill}
                                stroke={stroke}
                                strokeDasharray="3,3"
                                d={path}
                                strokeWidth={strokeWidth}
                                className="path"
                            />
                        </Fragment>
                    );
                })
            }
        </svg>
        {/* 起点 */}
        <div className={styles.beginPoint} ref={c => this.beginPoint = c}></div>
        {/* 终点 */}
        <div className={styles.endPoint} ref={c => this.endPoint = c}></div>
    </div>

我们将看见一下图中一样的12跟虚线
微信截图_20191212110753.png
欧克欧克。。快了快了

将定义的图用上,让图形动起来
<Fragment>
        <path
            key={d.id}
            fill={fill}
            stroke={stroke}
            strokeDasharray="3,3"
            d={path}
            strokeWidth={strokeWidth}
            className="path"
        />
        <rect x="-20" y="-20" width="40" height="40" fill="url(#imgpattern)">
            <animateMotion path={path} begin={animatTime} dur="6s" repeatCount="indefinite" />
        </rect >
    </Fragment>

代码中我们定义了一个宽度和高度分别为40的矩形,填充背景是我们上面定义的图。这里fill="url(#imgpattern)对应的也是以上自定义的图形id。
欧克欧克。。再配合<animateMotion>不过此标签好像不支持ie哦;还有一种方式是css:offset-path: path("M 208 231 C -65 180 -65 28 208 0");好像最兼容的是用translate3d但是麻烦一点,下次可以更新这个兼容ie的方法哦
ac64418a-5045-4069-bf69-32bd818c4d12.png

差不多就这样啦。另外一个例子中就不说啦。那个和这个一样,只是少了一个控制点而已哦

查看原文

赞 1 收藏 0 评论 0

笑的咪咪青藤 关注了用户 · 2019-12-11

捷叔叔 @mumu_59479fc466a4e

关注 1731

笑的咪咪青藤 关注了用户 · 2019-12-11

思否编程 @sfbc

思否编程是由中国新一代开发者社区 SegmentFault 思否孵化的在线编程培训平台,通过提升开发者 IT 职业技能,帮助开发者获得成功

思否编程网址:https://ke.sifou.com/
申请成为讲师:https://jinshuju.net/f/HK5r9K

添加编程小姐姐微信:bobonadia

关注 8459

笑的咪咪青藤 关注了专栏 · 2019-12-11

开源分布式关系型数据库 TiDB

TiDB 是一款定位于在线事务处理/在线分析处理( HTAP: Hybrid Transactional/Analytical Processing)的融合型数据库产品,实现了一键水平伸缩,强一致性的多副本数据安全,分布式事务,实时 OLAP 等重要特性。同时兼容 MySQL 协议和生态,迁移便捷,运维成本极低。

关注 3467

笑的咪咪青藤 关注了专栏 · 2019-12-11

Springboot源码深度历险记

深入讲解Springboot源码,原创连载源码专题,让你对boot更加游刃有余! 关注师长的原创公众号【java进阶架构师】,回复【架构】领取2019架构师视频全套

关注 811

笑的咪咪青藤 关注了专栏 · 2019-12-11

前端巅峰

注重前端性能优化和前沿技术,重型跨平台开发,即时通讯技术等。 欢迎关注微信公众号:前端巅峰

关注 20109

笑的咪咪青藤 关注了专栏 · 2019-12-11

终身学习者

我要先坚持分享20年,大家来一起见证吧。

关注 51386

笑的咪咪青藤 关注了专栏 · 2019-12-11

SegmentFault 思否观察

SegmentFault 思否对开发者行业的洞见、观察与报道

关注 26875

笑的咪咪青藤 关注了标签 · 2019-12-11

javascript

JavaScript 是一门弱类型的动态脚本语言,支持多种编程范式,包括面向对象和函数式编程,被广泛用于 Web 开发。

一般来说,完整的JavaScript包括以下几个部分:

  • ECMAScript,描述了该语言的语法和基本对象
  • 文档对象模型(DOM),描述处理网页内容的方法和接口
  • 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

它的基本特点如下:

  • 是一种解释性脚本语言(代码不进行预编译)。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务:

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息

《 Javascript 优点在整个语言中占多大比例?

关注 171748

笑的咪咪青藤 关注了标签 · 2019-12-11

前端

Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

Web前端优化
  1. 尽量减少HTTP请求 (Make Fewer HTTP Requests)
  2. 减少 DNS 查找 (Reduce DNS Lookups)
  3. 避免重定向 (Avoid Redirects)
  4. 使得 Ajax 可缓存 (Make Ajax Cacheable)
  5. 延迟载入组件 (Post-load Components)
  6. 预载入组件 (Preload Components)
  7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  8. 切分组件到多个域 (Split Components Across Domains)
  9. 最小化 iframe 的数量 (Minimize the Number of iframes)
  10. 杜绝 http 404 错误 (No 404s)

关注 189789

认证与成就

  • 获得 1 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-12-11
个人主页被 211 人浏览