注册

iOS SwiftUI 创建和组合视图 4.1

绘制和动画

学习绘制形状和路径,并创建徽章和添加动画

drawing and animation

包含章节

  • 绘制路径和形状
  • 视图动画和转场
  • 绘制路径和形状

    用户在浏览完一个地标后会得到一个徽章。但用户要得到徽章首先要先要创建一个徽章。本篇教程就是使用路径和形状创建徽章的过程,创建的徽章可以和其它图形组合形成位置标志。

    如果想要针对不同种类的地标创建不同的徽章,可以尝试改变徽章基本组成符号的重复次数、角度或大小。

    跟着教程一步步走,可以下载工程文件进行实践。

     项目文件
  • DrawingPathsAndShapes.zip (6486 )

第一节 创建徽章视图

创建徽章前需要使用SwiftUI的矢量绘画API创建一个徽章视图

badge

步骤1 选择文件->新建->文件,然后从iOS文件模板列表中选择SwiftUI View。点击下一步(Next),输入文件名Badge后点击创建(Create)

create file

name file

步骤2 调整Badge视图,暂时先让它显示"Badge"文本,一会儿再绘制徽章的形状

badge text

第二节 绘制徽章背景

使用SwiftUI的图形API绘制一个徽章形状

badge background

步骤1 查看在文件HexagonParameters.swift中的代码。HexagonParameters结构体定义了绘制徽章六边形形状的控制点参数。不需要修改这些绘制相关的数据,仅仅使用这些数据指定绘制徽章形状时,线段和曲线的控制点位置。

hexagonal data

步骤2 在Badge.swift文件中,绘制徽章的形状并使用fill修改器给六边形填充颜色,形成一个视图。使用路径可以把多条直线、曲线或其它绘制形状的基本笔划连成一个复杂的图形,就像形成徽章六边形背景这样.

Path

步骤3 给路径添加起点,move(to:)方法可以把绘图光标移动到绘图中的一点,准备绘制的起点

path start point

步骤4 使用六边形的绘制参数数据HexagonParameters,依次绘制六边形的边,形成大致轮廓.addLine(to:)方法会使用当前绘图光标所在点为起点,方法参数中指定的点为终点绘制直线。目前六边形看起来有点问题,不过不要担心,这是意料中的事,下面的步骤做完,六边形的形状就会和开头显示的徽章的六边形形状一致了

path fill

步骤5 使用addQuadCurve(to:control:)方法绘制贝塞尔曲线,让六边形的角变的更圆润些。

badge hexagonal

步骤6 把徽章路径包裹在一个Geometry Reader中,这样徽章可以使用容器的大小,定义自己绘制的尺寸,这样就不需要硬编码绘制尺寸了(100)。当绘制区域不是正方形时,使用绘制区域的最小边长(长宽中哪个最小使用哪个)作为绘制徽章背景的边长,并保持徽章背景的长宽比为1:1

geometry reader

步骤7 使用xScalexOffset参数调整变量,把徽章几何绘图区域居中绘制出来

badge square

步骤8 把黑色实心填充色改为渐变色,使徽章看上去和开始设计的样式一致

badge gradient

步骤9 渐变色上再使用aspectRatio(_:contentMode:)修改器,让渐变色按内容宽高比进行成比例渐变填充。保持1:1的长宽比,徽章背景可以保持居中在徽章视图中,不管徽章视图本身是不是正方形

badge center

0 个评论

要回复文章请先登录注册