UI设计师福利之零代码基础SVG缩放动画教程 - 简书
UI设计师福利之零代码基础SVG缩放动画教程
首先把基础效果放上，一个动态缩放的圆形。
circle.gif
这是一个模板，里面的代码可以直接复用，并可以延伸出一系列效果，主要是为了方便UI设计师只需要通过AI生成的SVG文件直接进行内容替换，让不会CSS3动画属性的UI也能轻松的实现类似的动画效果。
以后会陆续更新针对UI设计师的这种SVG动画教程，宗旨在于打破代码壁垒，让UI设计师专注于创意与设计。我会把代码尽量标准化，只需要“拷贝-粘贴”就能实现一些不错的动画效果。
先来说一下如何实现，如果学过一点点的SVG的小伙伴们，基础图形的绘制并非难事，直接可以码出circle以及cx，cy，r，fill等参数值，但对于零代码基础的UI来说，我们需要的只是在AI中建一个画布，画一个圆。
AI绘制一个圆形.png
看过我的其他文章的小伙伴们应该知道，AI的画布大小对应SVG 的viewBox属性的值，关于viewBox的坐标系作用解释起来还蛮复杂，我们不如就理解成画布容器吧，所有的图形都是放到这个画布上面的。这个动画我是让整个SVG来进行缩放，所以你的圆的大小和画布大小不重要，反而在画布的位置和最终的比例决定了最终动画效果。（有点迷糊的话后面会有解释）换句话说，这里你想建多大的画布都可以，只要里面的图形元素所占的比例协调就可以了（不能太大超出画布，最大100%，也不要太小，会留出太多边距。）
把AI生成的SVG代码copy出来，删掉冗余部分，会得到下面这个代码：
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200" &
&circle fill="#FFD4A9"
cx="100" cy="100" r="75"/&
现在预览的效果是一个静态的圆形，接下来我们用到CSS3的动画属性让整个圆形动起来。我定义一个动画CSS代码如下：
@keyframes changeScale{
width:100height:100 top:110 left:110}
50% { width:200height:200top:60 left:60px}
100% {width:300height:300top:10 left:10px}
animation:changeScale 1s ease 0 }
下面我们会用一张图来解释这个动画的原理以及对应的值在实际应用中如何设定。
@keyframes定义了整个缩放动画时间轴的几个关键帧，初始0%，结束100%，这两个值是不可缺少的，中间我加了一个50%，也就是我们的圆形缩放时中间停顿了一下的效果。
为了不让最终效果紧贴浏览器边缘，我通过top值和left值的设定留出了边距。
第一个关键帧（初始）示意图.png
第二个关键帧示意图.png
第三个关键帧（终止）示意图.png
而我们之所以经过精确计算，目的则是为了让SVG（并非里面的圆形）的中心点可以重合，最终实现完美的缩放效果。
SVG缩放原理.png
中间添加的关键帧可以有很多，比如你可以按顺序写10%，25%，60%……随便定义。也可以没有，则平滑的缩放，没有停顿效果。
删除50%关键帧之后的效果.gif
简单解释一下SVG调用的动画animation:changeScale 1s ease 0每个属性的释义。changeScale为我们定义的动画名称，1s是完成一个动画效果的时间，ease为动效速度曲线， 0s表示没有延迟直接开始，infinite 表示动画无限循环播放， alternate表示一个周期动画完成后（对应的我们为SVG由初始的100*100放大到300*300）逆向播放效果（300*300再收缩到100*100）从而实现连贯性。（因为每个属性值都有很多不同的设定，有需要其他效果不明白的小伙伴们也可以直接留言）。
下面放上完整的代码，小伙伴们直接copy下来保存一个SVG文件看看效果。
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200" &
@keyframes changeScale{
width:100height:100 top:110 left:110}
50% { width:200height:200top:60 left:60px}
100% {width:300height:300top:10 left:10px}
svg{position:animation:changeScale 1s ease 0 }
&circle fill="#FFD4A9"
cx="100" cy="100" r="75"/&/*这里是替换任意形状的部分*/
这里再多解释一下刚才用AI新建画布和绘图时的问题，当你重新建一个放大一倍400*400的画布，等比例画一个300*300的圆时
SVG代码如下
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 400 400" &
&circle fill="#FFD4A9"
cx="200" cy="200" r="150"/&
但最终动画效果里的尺寸完全没有变化。
反而如果你建一个很小的画布，比如50/50，但画一个圆形50/50，充满画布，SVG代码如下
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 50 50" &
&circle fill="#FFD4A9"
cx="25" cy="25" r="25"/&
最终动画效果反而圆形变大了。效果不再放上了，可以自己却替换看一下。
就是因为我们是对SVG的尺寸进行了缩放。决定SVG尺寸的是设定的SVG的width和height的值。
SVG的width和height值设定是你真正的动画效果里图形的尺寸。
为了保证辐射状的缩放效果，要通过设定不同的位置确保缩放的SVG的中心点重合，即**left的差值=1/2width差值
top的差值=1/2height差值
**,这与SVG里包含了什么图形元素无关。
既然说了，这个是缩放动画的模板，那下面就来看一下如何套用这个模板以及还能实现什么不同的效果。
1.缩放同时颜色改变###
先看下面这种效果，星星缩放的同时伴随透明度的改变
在模板基础上需要修改的有两个部分，一个是用星星替换圆形，一个是增加一个改变透明度的动画。还是在200*200画布，我用AI自带的星形工具绘制一个星星（懒癌发作，不想做复杂的图形 o(╯□╰)o），然后AI生成SVG的代码里面，只需要&polygon&这一部分，用它去替换模板里的&circle&。
这样替换完成之后，我们就得到了一个会同样动效的星星，但为了改变透明度，我需要再增加一个改变透明度的动画，我定义为changeColor，关键帧与缩放动画的关键帧保持同步，但定义了透明度fill-opacity的变化值，最后代码如下：
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200" &
@keyframes changeScale{
width:100height:100 top:110 left:110}
50% { width:200height:200top:60 left:60px}
100% {width:300height:300top:10 left:10px}
/*以下为改变透明度的动画设置*/
@keyframes changeColor{
0% {fill-opacity:1}
50% {fill-opacity:0.75}
100% {fill-opacity:0.5}
svg{position:animation:changeScale 1s ease 0 }
/*让星星去调用改变透明度的动画，其他动画属性设置保持一致*/
#polygon{fill:#d95470;animation:changeColor 1s ease 0}
&polygon id="polygon" points="100,21.4 125.5,73.1 182.7,81.4 141.3,121.7 151.1,178.6 100,151.8 48.9,178.6 58.7,121.7
17.3,81.4 74.5,73.1 "/&
这是透明度的改变，当然，也可以定义颜色的改变。比如我用AI自带的极坐标工具，乱七八糟的SVG代码不用管，我把改变颜色的动画重新定义
@keyframes changeColor{
0% {stroke:#D8645B}
50% {stroke:#5CD6C2}
100% {stroke:#8D5ED3}
然后就得到了下面这种效果：
缩放伴随颜色变化.gif
2.缩放同时旋转###
继续用AI自带的螺旋线形状，生成&path&。这里我改了一下，为了让旋转看起来更顺畅，我去掉了50%关键帧，把运动速率由ease（慢-快-慢）改成了线性linear，并且去掉了旋转效果的逆向播放（删除alternate），始终保持同一个方向的旋转，得到下面的效果。
缩放伴随旋转.gif
对应代码如下：
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200" &
@keyframes changeScale{
width:100height:100 top:110 left:110}
100% {width:300height:300top:10 left:10px}
@keyframes rotate{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
animation:changeScale 1s linear 0
transform-origin:50% 50%;
animation:rotate 1s linear 0
&path id="helix" fill="none" stroke="#58BA8E" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10" d="M182.5,151.3
c-39.1,39.1-102.4,39.1-141.5,0C9.7,120.1,9.7,69.4,41,38.1c25-25,65.5-25,90.5,0c20,20,20,52.4,0,72.4c-16,16-41.9,16-57.9,0
c-12.8-12.8-12.8-33.6,0-46.4c10.2-10.2,26.8-10.2,37.1,0c8.2,8.2,8.2,21.5,0,29.7c-6.6,6.6-17.2,6.6-23.7,0c-5.2-5.2-5.2-13.7,0-19
这里利用transform: rotate(对应旋转角度)属性定义了一个旋转动画
@keyframes rotate{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
在定义旋转动画时，一定要定义旋转中心点，transform-origin:，这里我定义了50% 50%，即图形的中心位置，如果不定义的话会默认旋转中心点为左上角。
3.缩放复杂图形###
有点心虚的说，说是复杂，其实还是很简单的拼了个图案出来，只是为了说明用这个模板怎么来实现你想绘制的各种图案的动画，我是抛砖引玉嘛，身为UI设计师的你可以用AI随意绘制。
我画了一朵描边的云和一个月亮，这个在AI里面导出SVG的时候是两个路径&path&。
任意图形的缩放
用模板来实现简直太简单了，比上面改变透明度的还要简单，只需要一个简单的替换，代码如下：
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200" &
@keyframes changeScale{
width:100height:100 top:110 left:110}
50% { width:200height:200top:60 left:60px}
100% {width:300height:300top:10 left:10px}
svg{position:animation:changeScale 1s ease 0 }
/*下面是AI生成的，直接copy就可以*/
&path fill="#D4FDFF" stroke="#29CDFF" stroke-width="4" stroke-miterlimit="10" d="M136.3,89.8c-3.8,0-7.5,0.6-10.9,1.8
C120,74.4,104,62,85.1,62C62,62,43.3,80.6,43,103.6c-14.2,1.3-25.3,13.2-25.3,27.7c0,15.3,12.4,27.8,27.8,27.8v0h89.3
c0.5,0,1.1,0,1.6,0c19.2,0,34.7-15.5,34.7-34.7C171,105.4,155.5,89.8,136.3,89.8z"/&
&path fill="#FFDC6E" d="M171.4,20.1c2.1,3,3.5,6.5,4.1,10.3c2.1,13.6-7.2,26.4-20.8,28.5c-4.8,0.8-9.5,0.1-13.7-1.7
c5.3,7.6,14.6,12,24.4,10.5c13.6-2.1,22.9-14.9,20.8-28.5C184.8,30.4,179,23.4,171.4,20.1z"/&
4.不同效果叠加###
有了上面的基础，可以放个大招了，来实现一个多种动画叠加的效果，如下图(不要说丑，也做了很久呢)：
复合动画.gif
动画其实可以拆成三部分，一部分是慢慢变大的树，我把它用我们的缩放模板来完成，不过个别参数修改了一下；一部分是沿着轨迹运动的太阳（太阳直接借用的素材，轨迹路径是自己建的）；一部分是静止的小房子（直接借用的素材）。
因为不止用了一个SVG，所以我把这些放进一个html文件。先从位置示意图分析一下各种参数的设置。
复合动画拆解.png
先来说树，与我们前面的辐射形状缩放的动画不同，我们需要它从水平线变大，缩放的中心点已经在上图中标注了。尺寸我希望从50*50放大到300*300（图上蓝色框出的区域）。这意味着需要重新定义初始和结束的位置值，依旧在浏览器视窗边缘留出一定的距离（20px）。
绘制树的画板我们前面说过了，尺寸任意，不影响效果。这棵树熟悉AI的设计师们一定很眼熟吧，是的，这就是AI自带的符号，让我拿来直接用了（懒懒懒，也是没治了），不过保存一定要断开与符号的链接。树的变大速度依旧用了线性，时间定义为12s。
房子和沿设定轨迹运动的太阳可以放到同一个SVG里（最好在两个图层，防止代码看上去太乱），关于沿轨迹运动，这是另外一个教程，涉及到方向和根据轨迹起点位置对运动元素的位置校正，后面会单独放一个全新的教程里。整个动画的代码如下：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&叠加动画&/title&
&style type="text/css"&
@keyframes changeScale{
0% {width:50height:50 top:270 left:145}
100% {width:300height:300top:20 left:20px}
#tree{position:animation:changeScale 12s linear 0 }
#sun{position:left:20top:20width:500height:300}
/*以下为树SVG*/
&svg id="tree" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200" &
此处夹杂一大堆树的代码……
/*以下为太阳和房子SVG*/
&svg id="sun" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 300" &
此处夹杂一大堆太阳的代码……
&animateMotion path="M467.3,271.3c0,0-3.8-230.3-208.6-229.1C32.8,43.4,26,267.6,26,267.6" dur="2s" repeatCount="indefinite" rotate="auto" calcMode="spline"
keySplines="0.42 0 1 1"
keyTimes="0;1" /&
/*路径运动动画*/
此处夹杂一大堆房子的代码……
那一堆图形的代码实在太多，而且看了也没什么意义，就不放了，这样完成整个动画之后我们的文件大小在40K，要远远小于视频格式或者动图格式（轻则几兆）。而且配合JavaScript可以很好的完成一些交互。
呼，教程到此结束，录屏真的录到手软……
在没有开始学习CSS3动画时，一直都是用SVG的动画属性来完成效果，而现在再把这些全部知识贯通起来之后，思路就清晰了很多，SVG用来绘制图形和路径动画，CSS3来完成变形动画效果，JavaScript来控制动画节点以及获取参数和赋值。
商用软件交互设计师，幻迷，书虫
先看一个动画效果，这种小飞机沿路径飞行(路径部分线段变成绿色是录屏软件出了问题)。 这种动画效果最常见于发送信息后，两个不同位置之间的导航指向等等，总之使用场景还是很多的。对于SVG动画来说，这种效果是最最简单不过，只需要一个路径外加几个属性的简单设置就能完成，简单到不算飞...
svg无疑是现在前端比较热门的图形格式，且很实现很多动画效果，以下发布的，为svg描边效果的教程。 自己虽然有css代码基础，但对于css动画绝对属于小白一只，且前端的JavaScript更是一窍不通，但svg的描边动画是在过于神奇，毕竟是用代码生成的，于是在svg基础动画...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
之前分享了一些自己平时整理的可以通用的SVG动画的教程基本都是最基础的变化，旋转也好，缩放也好，沿路径运动也好，只需要定义CSS3的一些动画属性值或者SVG的动画属性标签，当然，运用得当的话，依靠这些也能做出很多超炫的效果，只要想象力足够，idear胜过方法。本质上来讲，各...
一位苏格兰威士忌酿酒师，他曾表示，勾兑这个词在外国并没有任何贬义，许多精品威士忌都是勾兑而来，这样在口感上和气味上才能达到极致，而且在不同国家这种勾兑的技术也都是保密的。今天我们就详细了解一下白酒勾兑过程。 在白酒的生产中，勾兑也是一个很重要的生产环节。其实，广义的勾兑应当...
1-如果你的个性、态度和职业精神没有问题，不是团队不能要的那三类人，找到一个愿意帮助自己成长的老板，这是展现下属力的第一步。 因为领导不同，下属的积极性和自我驱动力就会不同，表现优异的概率自然也会增大很多。 2-选择领导很重要，选择行业也非常重要。用行业做横轴，用领导做纵轴...
无聊的日子，手机成了我和小朋友的抢手货。用手机看电视、电影。用手机和朋友微信。用手机看公众号美文。用手机懒人听书。用手机唱歌…这个暑假，手机将它的作用在我们家发挥得淋漓尽致。 借小朋友的话说，我和他是互相听话的伙伴。一直以来，我们为一只手机有商有量，目前发生最多的是共享事件...
8.2自我疆界和力量
行为的习惯，做事的风格及一系列的行为举止可以用自我疆界来形容。
如果说对于工作和生活发生了一些大的转变而导致的自身出现了问题甚至不适同样可以说明是自我疆界的格局很小而导致的。同样疆界的大小也会影响格局的大小。
而如何才能提高自我疆界呢？直接...
之前听到一句话：他爱不爱你，一件小事就能知道。其实我对这句话是没有任何印象的，直到今天发生了一件事情，让我想起了它。 昨天晚上告诉老公，我的耳机坏了，他让我用他的，我推托说先凑合吧，还能听。今天来到公司，掏出手机发现他的耳机认认真真的插在我的手机上，我的坏耳机也不见了踪影。...write less , do more...
基于SVG的矢量绘图
一、SVG介绍
SVG（Scalable Vector Graphics）“可升级矢量图形”的意思，它由W3C制定的基于可扩展标记语言 (XML) 来描述二维矢量图形的一个开放标准。它使Web开发人员、设计人员和用户摆脱HTML的限制，并通过一个简单的说明性编程模型创建丰富的视觉内容和交互功能。
SVG严格遵从 XML 语法，并用文本格式的描述性语言来描述图像内容，因此它是一种和图像分辨率无关的矢量图形格式，利用这一强大特性的技术，XML开发人员可以根据来自实时 数据源（如电子商务系统和公司数据库）的数据驱动型、交互式和个性化图形创建Web应用程序。而且，无论用户如何与数据交互，开发人员都可以针对许多不同 对象、文化和人群来自定义SVG。
二、SVG绘图
SVG文本遵循XML名字空间使用规范，因此SVG中的文字可以作为其本身描述图像的关键字通过搜索引擎进行查询。SVG矢量图像由线框和填充物等组成，它由计算机根据矢量数据进行计算，然后绘制而成。矢量图形相对于位图有以下特点：文件大小与图形的复杂程度有关，而与图形的具体尺寸无关；图形的显示尺寸可以无极缩放，变化后不影响图形的质量。所以在图形复杂程度不大的情况下，矢量图形具有文件小、可无极缩放的有点。
SVG文档需要遵循一些简单的规则才能成为有效的文档。SVG文档有其自己的描述结构[7]，SVG绘画结构如图1：
同时SVG本身也定义了一套图元元素，即组成一个完整SVG文档的基本元素。SVG基本元素关系如图2：
这些元素表示类似形状和线条这样的对象。最基本的要求是，SVG文档必须以&svg&元素开始。SVG文档也可以指定为文档片段，也就是说，一个SVG文档可以嵌入在另一个XML文档内。但是通常将SVG文档指定为单独的文档，其扩展名一般为‘*.svg’或‘*.svgz’。
SVG有六种基本形状：矩形（包括圆角矩形）、圆形、椭圆、线段、折线、多边形。从数学上来讲，这些元素与&path&路径元素（下一小节介绍）所描述的形状在本质上是一样的，即这些形状也是路径的特例，因此一些SVG制作工具所制成的SVG文档，其各种线条都使用&path&元素来描述。凡是可以作用于路径上的样式，如填充/描边等,同样可以作用于基本形状上。
表1 列出了SVG定义的常见规则形状的元素和属性。其中style属性指定元素样式，如填充色和边框颜色。该属性是可选的。
width、height、x、y、style
width为高，height为宽，x、y为矩阵左上角的坐标
x1、y1、x2、y2、style
(x1,y1)为直线起点坐标，(x2,y2)为直线的终点坐标
cx、cy、r、style
(cx,cy)为圆心坐标，r为圆半径
cx、cy、rx、ry、style
(cx,cy)为椭圆中心坐标，rx为x轴半径，ry为y轴半径
points、style
points如polygon中的points，要填充时折线必须闭合
points、style
points按画线顺序依次列出多边形各顶点坐标
（注释：SVG绘图坐标系中（0,0）为坐标系左上角点，水平向右为X轴正向，向左为X轴负向；垂直向下为Y轴正向，垂直向上为Y轴负向。）
除了上次的六个普通标签之外，SVG还支持复杂的路径标签：path
使用path标签时，就像用指令的方式来控制一只画笔，比如：移动画笔到某一坐标位置，画一条线，画一条曲线，完事了抬起画笔，OVER！
path支持的指令有：
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置L = lineto(L X,Y) ：画直线到指定的坐标位置H = horizontal lineto(H X)：画水平线到指定的X坐标位置V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线S = smooth curveto(S X2,Y2,ENDX,ENDY)Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线Z = closepath()：关闭路径
其中蓝色的指令是我常用的，绿色的目前为止还没有用到
一、说明：
坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。
所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系
指令和数据间的空格可以省略
同一指令出现多次可以只用一个
1、L H V指令
M　起点X，起点Y　L（直线）终点X，终点Y　H（水平线）终点X　V（垂直线）终点Y如：M 10,20 L 80,50 M 10,20 V 50 M 10,20 H 90
允许不闭合。可以想像成是椭圆的某一段，共七个参数：
A RX,RY,XROTATION,FLAG1,FLAG2,X,Y
RX,RY指所在椭圆的半轴大小XROTATION指椭圆的X轴与水平方向顺时针方向夹角，可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。FLAG1只有两个值，1表示大角度弧线，0为小角度弧线。FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针X,Y为终点坐标
如：m 200,250 a 150,30 0 1 0 0,70
没有更多推荐了，Flash使用as画圆代码_百度知道
Flash使用as画圆代码
要求输入圆心x,y
半径r。按下按钮键直接生成圆
我有更好的答案
stop()this.createEmptyMovieClip(&lineR&, 0);var xx = 0;var yy = 0;var ss = 0;//红色var color = &0xCC0000&lineR.lineStyle(3, color, 100);lineR.moveTo(150, 100);this.onEnterFrame = function() { ss += 10; xx = 100+Math.cos(Math.PI/180*ss)*50; yy = 100+Math.sin(Math.PI/180*ss)*50; lineR.lineTo(xx, yy); if (ss == 360) {
onEnterFrame =null }};AS2.0 的 3.0还没做过，将上面代码粘贴到时间轴上试试看。
采纳率：94%
来自团队：
参考文档:()
var circle:Shape = new Shape();
circle.graphics.beginFill(0xFFFFFF);
circle.graphics.lineStyle(1);
circle.graphics.drawCircle(0, 0, 50);
//x,y,半径
circle.graphics.endFill();
stage.addChild(circle);
这样子有什么问题？？？求解答
你这是AS2啊, 我出的是AS3的代码, 关于AS2, 你可以参考这个文章.原理就是把整个圆会成小块进行绘制. 就像积分一样
本回答被提问者采纳
import flash.events.MouseEvar colorFill:uint = 0x00ff00;var colorLine:uint = 0xff0000;var cxNumber:Number = Number(cx.text);var cyNumber:Number = Number(cy.text);var cpNumber:Number = Number(cp.text);btn.addEventListener(MouseEvent.CLICK,clickHandler);//按钮cx.addEventListener(TextEvent.TEXT_INPUT,txt1);//X动态文本cy.addEventListener(TextEvent.TEXT_INPUT,txt2);//Y动态文本cp.addEventListener(TextEvent.TEXT_INPUT,txt3);//半径动态文本function txt1 (evt:TextEvent):void{ cxNumber = Number(cx.text); }function txt2 (evt:TextEvent):void{ cyNumber = Number(cy.text); }function txt3 (evt:TextEvent):void{ cpNumber = Number(cp.text); }function clickHandler(event:MouseEvent){graphics.clear();graphics.beginFill(colorFill);graphics.lineStyle(2,colorLine);graphics.drawCircle(cxNumber,cyNumber,cpNumber);graphics.endFill();}
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。定一个圆类表示一个圆的要素有:中心坐标(cx,cy)半径radius算圆的周长和面积.然后使用圆类定义一个对象调用_百度知道
定一个圆类表示一个圆的要素有:中心坐标(cx,cy)半径radius算圆的周长和面积.然后使用圆类定义一个对象调用
希望有详细的代码，及步骤
我有更好的答案
static void Main(String[] args){
Circle a = new Circle(10, 10, 5);
Circle b = new Circle(20, 20, 10);
Console.WriteLine(&Circle a: area={0},length={1}&, a.AreaOfCircle().ToString(&0.00&), a.LengthOfCircle().ToString(&0.00&));
Console.WriteLine(&Circle b: area={0},length={1}&, b.AreaOfCircle().ToString(&0.00&), b.LengthOfCircle().ToString(&0.00&));}public class Circle{
public Circle(int x, int y, int r)
public double AreaOfCircle()
return Math.PI * radius *
public double LengthOfCircle()
return 2 * Math.PI *
采纳率：45%
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。