久等了，上集我们制作了一个具有行走动作的蓝精灵动画，本集我们来为蓝精灵实现往返走动的效果。
Symbol，即元件，是动画制作中常用的概念。通过Symbol我们可以封装独立的动画元素，便于管理和重用。脚本，是动画制作中另一个重要的概念。在HTML5动画制作中，脚本即JavaScript脚本，通过脚本我们可以响应动画事件，实现交互，更自由的操控动画元素,比如元件动画的重复播放。
中，我们制作了一个具有行走动作的蓝精灵动画。
在本教程中，我们来为蓝精灵实现往返走动的效果。
下载Adobe Edge Animate制作工具
在本教程发布的时间，Edge Animate版本为1.5，可以在
上免费下载。 您只需要在
注册即可登录下载。
下载Edge Animate示例项目文件
本教程将在
的基础上继续，您需要下载项目文件
资源文件如下：
1. 生成Symbol
启动Edge Animate，打开/a&
解压后其中的smurf.an文件。
在舞台上选择蓝精灵元素（或者可以在右上角的Elements面板中选择smurf_sprite），点击右键，点击“Convert to Symbol”命令，转换元素为元件。转换后的元件不仅包含原有元素的资源，而且包括其中设置的独立时间线动画和脚本。
Edge Animate 元件
在弹出的“Create Symbol”提示框中输入新的元件名称，比如“Smurf”。默认选中Autoplay Timeline，点击OK。此时，你可以在右边Lirary面板的Symbols子面板中，看到生成的新的Smurf元件。此时，舞台上的原有Smurf_Sprite元素也变为名为“Smurf”的元素，时间轴上也对应做出修改。如下图：
Smurf Symbol
元件是一个可复用的对象，在舞台上，你可以从Library的元件面板中，拖拽元件到舞台上来创建多个新的元件实例。比如，我们可以把现在舞台上的蓝精灵删除，然后在元件面板中拖拽Smurf元件到舞台上。每当你拖拽Smurf元件到舞台上，Animate都会为你生成一个新的Smurf实例，并为新的实力元素自动命名。
Instance of Symbol
现在，在舞台中只留下一个蓝精灵元件实例，并在Elements面板中命名其为SmurfBoy（双击元素面板中名称即可重新命名）。
2. 使用脚本控制元件动画重复播放
在时间轴上，Animate自动在0-1秒中为SmurfBoy元素生成了“人字条轨迹”，即Chevron track。这意味着，SmurfBoy会自动播放Smurf元件中的时间线动画。
Chevron Track
通过Ctrl+Enter/Cmd+Enter，可以调用浏览器查看动画运行状态。蓝精灵走了1秒就自动停止了。下面我们让蓝精灵的行走动作能够不断重复。
在元件面板中，选择Smurf点击右键，选择“Edit”来编辑Smurf元件，进入Smurf元件编辑状态。此时，舞台面板的标签显示为“Stage/Smurf”。
Edge Animate允许设计师在时间线中嵌入JavaScript脚本，来提供更精确的动画控制和交互能力。把鼠标移至时间线“Actions”条目左侧的大括号图标，会显示“Open Timeline Actions”提示。如下图：
Timeline Actions
点击{}图标，并选择“Complete”事件，来为Smurf元件的Complete事件添加动作脚本。Complete事件意味着时间线动画播放完毕。我们通过添加脚本来让Smurf元件在时间线动画播放完毕时能够从0秒开始重新播放，来实现动画的反复播放。点击动作脚本窗口右侧的“PlayFrom”脚本按钮，并修改插入的脚本为sym.play(0)。如下图：
TImeline动作脚本
关闭脚本窗口，点击“Stage/Smurf”舞台标题的“Stage”，回到舞台时间线编辑状态。通过ctrl+Enter/cmd+Enter运行动画，可以看到蓝精灵的行走动作可以不断播放。
3. 使用Pin生成前行动画
下面，我们为蓝精灵加入行进动画效果。在Edge Animate中，提供了多种方式来生成关键帧和过渡。这里，我们来使用Pin按钮生成关键帧和期间的过渡。激活“Auto-Keyframe Mode”。并把播放头移至0:00秒。
“Pin”按钮的作用是在时间轴上把当前状态（动画的属性值）“钉”在时间轴上当前的播放头位置。现在，我们点击Pin按钮，可以看到在时间轴的播放头所在位置0:00秒，生成了一个蓝色的Pin标志。如下图：
接下来，把播放头移到0:03秒，并在舞台上水平移动蓝精灵到舞台最右侧，比如X=418px。可以看到，在移动过程中，Edge Animate自动在0:03秒位置生成了新的关键帧，并在0:00和0:03秒两个关键帧之间自动生成了补间动画。如下图：
Pin生成的动画
现在，蓝精灵已经实现了行进。我们将在下面的教程中加入转身行进和背景等其他效果。
本教程完成后的项目可以在此下载：
优设哥向您推荐：
相关 [adobe 神器 animate] 推荐：
- 优设(UISDC)
久等了，上集我们制作了一个具有行走动作的蓝精灵动画，本集我们来为蓝精灵实现往返走动的效果. Symbol，即元件，是动画制作中常用的概念. 通过Symbol我们可以封装独立的动画元素，便于管理和重用. 脚本，是动画制作中另一个重要的概念. 在HTML5动画制作中，脚本即JavaScript脚本，通过脚本我们可以响应动画事件，实现交互，更自由的操控动画元素,比如元件动画的重复播放.
- 优设(UISDC)
在Flash动画制作中，使用SpriteSheet制作动画元素是一个常见和普遍的方法. 在Edge Animate中，我们也可以利用SpriteSheet来制作HTML5动画. 本文将从一个示例出发，介绍在Edge Animate中如何使用SpriteSheet. 在文章
《EDGE ANIMATE：ADOBE新推制作HTML5动画可视化工具》中，可以看到一个简单的蓝精灵动画，一个蓝精灵从屏幕左侧走到右侧，又返回，然后不断重复.
- dxh_0829的专栏
在以前很长一段时间里，网页上的各种特效还需要采用flash 在进行. 但最近几年里，我们已经很少看到这种情况了，绝大部分已经使用JavaScript 动画效果来取代flash. 说的取代是网页特效部分，而不是动画. 网页特效比如：渐变菜单、渐进显示、图片轮播等；而动画比如：故事情节广告、MV 等等.
- laguna - Solidot
tbw 写道 "Adobe也许在计算机桌面的PDF市场占统治地位，但是，Adobe基本上把iPhone和iPad等移动设备的PDF市场留给了竞争对手，如GoodReader和苹果的iBooks. Adobe在公司博客中宣布，它已推出iPhone和iPad通用的“Adobe Reader for iOS”软件.
- Wick - Solidot
Adobe发布了Edge Preview 1，允许Web开发者使用HTML5、JavaScript和CSS3等Web标准，为网站开发动画和交互内容. Adobe Edge使用了开源JavaScript库jQuery. jQuery是Edge的重要组件，Edge Preview 1使用jQuery 1.4.2，后续版本将使用较新版的jQuery，Adobe发布的下一个版本预计将使用jQuery 1.6.2.
- changwei - 软矿
早前Adobe全线产品升级至CS5.5，详见“Adobe CS5.5全系列产品简体中文版下载”，我一度想通过Adobe官方的下载链接下载，但不是速度太慢就是下载到一半时提示软件下载出错. 后来还好有好心网友上传安装文件至电驴. 可惜的是，目前也只有找到Adobe CS5.5 Master Collection（大师版）的电驴下载链接，未下载的朋友可以猛点击这里（此版本只有英文版）下载.
- 7Yue's Weblog
Adobe官方在今天发表了一篇非常非常重要的声明文档，是Adobe Flash runtimes路线图. 这篇路线图提供了对于Adobe Flash runtimes的开发路线概览，这篇概览的目的是提供一个清楚的指引，告知外界与社区开发者们Adobe现在是如何思考未来1到2年内核心Flash功能的发展计划.
- Joji - ITeye资讯频道
Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具Adobe Edge，允许设计师通过HTML5、CSS和JavaScript制作网页动画，无需Flash.
Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上，但未来将增加更多HTML5功能，比如Canvas、HTML5音频/视频标签等.
- Zen - 36氪
Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具{Adobe Edge}，允许设计师通过HTML5、CSS和JavaScript制作网页动画. Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上，但未来将增加更多HTML5功能，比如Canvas、HTML5音频/视频标签等.
- XcessLeo - GeekPark 捕风捉影
Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具{Adobe Edge}，允许设计师通过HTML5、CSS和JavaScript制作网页动画. Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上，但未来将增加更多HTML5功能，比如Canvas、HTML5音频/视频标签等.
--> 坚持分享优质有趣的原创文章，并保留作者信息和版权声明，任何问题请联系：itarea.。AE 文字图层animate按钮有什么用？文字图层自己不就有各种属性么？为什么还要加这个按钮？_百度知道
AE 文字图层animate按钮有什么用？文字图层自己不就有各种属性么？为什么还要加这个按钮？
我有更好的答案
这么说吧你之前看到的属性是变换属性 是所有的图层都有的而自带的动画属性是文字属性说通俗一点
变换是整体变化文字是可以单个字符变化比如
文字动画 可以上文字一个个的放大 再缩小
而变换属性是作不到的
影视制作从业者
层属性只能调节整体的，这个可以做出更加丰富多彩的动画的
为您推荐：
其他类似问题
天武绝恋的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。&>&MFC 动画按钮（异形透明渐变滑过声效等）-CAnimateButton
MFC 动画按钮（异形透明渐变滑过声效等）-CAnimateButton
上传大小：204KB
基类：CButton
功能：1、从资源或者外部导入图片，抠除mask色，实现按钮异形;
2、实现按钮的透明渐变效果;
3、3D按钮文字效果;
4、按钮Hover、点击声音效果;
5、设置按钮光标.
作者：C瓜哥
blog: www.cguage.com)
综合评分：4
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有20条
我的也打不开
很好的资源
太牛了，很不错的资源，值5分，谢谢！
yangzhenglun
综合评分：
积分/C币：3
VIP会员动态
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
MFC 动画按钮（异形透明渐变滑过声效等）-CAnimateButton
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
举报的资源分：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*详细原因：
MFC 动画按钮（异形透明渐变滑过声效等）-CAnimateButton在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
为什么同一个按钮上无法设置两种animate属性呢，该怎样修改这段代码使同一个按钮点击一次时伸展，点击第二次时收缩呢?
&script type="text/javascript" src="/jquery/jquery.js"&&/script&
&script type="text/javascript"&
$(document).ready(function()
var l = $("#box").width();
if(l = "100px"){
$(".btn1").bind("click",function(){
$("#box").animate({width:"300px"});
$(".btn1").bind("click",function(){
$("#box").animate({width:"100px"});
&div id="box" style="background:#98bf21;height:100width:100margin:6"&
&button class="btn1"&Animate&/button&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
首先你需要具备以下知识：
ready方法是什么时候执行的？
bind方法是怎么用的？
.btn1被点击的时候会执行哪些代码？
我们逐一来看。
ready方法是什么时候执行的？
ready方法在文档加载完成后执行。也就是说当body标签解析完后，以下代码将会执行一次：
var l = $("#box").width();
if(l = "100px"){
$(".btn1").bind("click",function(){
$("#box").animate({width:"300px"});
$(".btn1").bind("click",function(){
$("#box").animate({width:"100px"});
我们来纠正一下代码中的基础错误。
var l = $("#box").width();
if(l == 100){
$(".btn1").bind("click",function(){
$("#box").animate({width:"300px"});
$(".btn1").bind("click",function(){
$("#box").animate({width:"100px"});
注意第2行的 = 已经被纠正为 ==。并且width方法返回的是100而不是"100px"。
bind方法是怎么用的？
bind方法用于给元素绑定事件处理函数。它本身并不会执行事件处理函数。看如下代码：
$(".btn1").bind("click", function(){
$("#box").animate({width:"300px"});
注意，此时$("#box").animate(...)并没有执行。而是在.btn1被点击后才会执行。
.btn1被点击的时候会执行哪些代码？
现在我们来回顾一下上面标有行号的代码1-10行。这段代码为.btn1绑定了一个点击事件处理函数，.btn1被点击后执行的就是这个处理函数。
这个处理函数到底是什么呢？如果l == 100那么这个函数就是...animate(...300)，否则这个函数就是...animate(...100)。
注意，这个判断是在文档加载完成的时候执行了一次，而不是在每次点击.btn1的时候执行。
因此，你在一开始就决定了点击.btn1时应该调整#box的width为100还是300，并且此后是不会改变的。
应该如何实现你要的效果？
直接看代码吧，如果已经能够理解自然是再好不过：
$(document).ready(function() {
$(".btn1").bind("click", function() {
var $box = $("#box");
if ($box.width() == 100) {
$box.animate({width: "300px"});
$box.animate({width: "100px"});
更多关于jQuery的知识建议多查阅。希望对你有帮助。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。[原创]Adobe&Edge&Animate1.0&--创建按钮及简单功能实现
本文版权属于&北京联友天下科技发展有限公司。
转载的时候请注明版权和原文地址。
以下为大家讲解如何使用Edge制作一个简单的按钮动画，使用到的方法：
--Edge动画编辑
--简单的按钮制作
--对按钮添加Javascript控制代码
一、制作按钮：
1.使用Edge的圆角长方形（RoundRectangle）制作一个按钮图形
2.接下来添加文字
3.选中长方形和文字，将他们转换为元件
4.将元件的鼠标手势修改为小手，这样当我们的鼠标移动到元件上方的时候鼠标指针变为小手，提示我们这是个按钮。
5.接下来我们为按钮添加代码，比如说，当我们鼠标移到按钮上方，我们希望按钮文字发生改变。首先点击添加代码；
选择mouseover函数；
点击右侧GetSymbol函数，并添加自己的功能代码：
6.接下来让鼠标离开的时候文字恢复为原来的：
点击加号添加mouseout函数
添加功能代码：
这时按Ctrl/Command&+&回车键，可以在浏览器中预览效果，可以看到效果正如我们想象的一样。
二、制作动画：
既然这是一个按钮，那么我们就要让它实现按钮功能，比如点击按钮开始播放动画，下面我们首先制作一个简单的动画。
1.添加文字
我们为它添加一段Scale动画，分别添加Scale&x和Scale&y的关键帧
在0秒处都为为0%，在2秒处都为100%，将Easing改为Ease&out--&Elastic；
三、添加按钮功能：
接下来我们添加功能，点击按钮的时候开始播放动画。
1.先让动画不要播放，在时间线上0秒处，添加Trigger；
让动画不要播放，添加如下代码；
2.为按钮添加播放功能：点击添加动作控制程序，添加click事件；
添加代码；
这样按钮就制作完成了，我们可以在浏览器中预览效果。
本文地址：
作者：北京联友天下科技发展有限公司&肖伟民
阅读(...) 评论()}