19_尚硅谷_h5_canvas-飞鸟.wmv原创

OK，那讲完这个使用图片之后，我们来做一个小小的实例，使用飞鸟是吧？啊不不做一个什么飞鸟动画吧，这个之前你们应该做过，那所以说这边我就稍微快一点了，OK，飞鸟在哪边是不是它。是不是是不是，是不是，这玩意儿还记得怎么做的吗？这肯定跟图片有关系啊。肯定跟什么，你看这就什么图片嘛，是不是，可是这个图片要跑是，而且这个翅膀要灰啊，这个翅膀灰肯定是跟我这些图片是有关系的，跟这个图片的设计是有关系的，那所以说先把这套图先拿过来。OK，我们要干嘛？这边先复制版CTRLCCTRL08，我们来做个分享这里。好，图片贴进来。

B。好，我们来做一个飞鸟。好，怎么做，肯定要去拿图片呢，是不是啊，怎么拿，问题是这个图片怎么拿。每次拿的图片都不一样吗？那肯定有循环电线。是吧，而且是不会停的嘛，是吧，那肯定里面是一个方形只你是吧，比如说干嘛，我们说人眼最好的是一秒钟60次是不是OK，那每次进来的时候我是不是要去干嘛，Y用什么一秒讲是不是等于什么，你要你面讲是吧，这次写你要么你要把它记住了啊，你记住一两个点就应该可以写出来，你要知道我们现在做飞鸟动画，非角动画肯定是需要变的，那我肯定要在看发上去引去什么，引用图片吗？指白那干嘛in麦减什么点src等于什么。

应该底下的么图片点是吧，而且这个图片点一直变是吧，那肯定干嘛万一吗来是吧，首先等什么你吗是吧，每次进来这个来干嘛，来个加家是吧，那个家做干嘛他。剃掉是吧，去把这干嘛，再进了是吧，然后干嘛。要干嘛，每次一卖就在什么哦，漏的时候要等一个什么放吗？在这个方皮里面真正去掉什么。D引入图片的什么方案嘛，是吧，这个方案是不是可以写，可以写到外面去吧，写到这个定子性什么外部来吗？来一个啊方形是不是娟是不是怎么来CT等于什么娟。

D叫什么OK，穿什么？第一个穿什么？传图片对象吗？问题，现在这个图片对象你还能看到吗？两个重了吧，两个方形了吧，我是不在这个方形里面去定的这个图片，那他能不能传过来。它里面这个是谁。Image嘛，是吧，那我这边去接收一下，那我这边就用这个image是不是。能不能理解是吧，而且还有一件事情大家看看，我们说刚刚你们看到那个飞鸟是不是在我整个页面里面飞了。是不是是不是在我整个页面里面飞常，那么你画布是不是就是我整个页面，那怎么办？上来就应该把这个画过来调一调，是不是开是什么开点应该等什么是个吧，多点多点可能。

吗？这代表的宽度啊，是么？等于多么可能。C嘛，可能他还什么啊，你先记住它这代表是口的宽度，这表是口的高度，之后我们会讲懂吗？可这个之前应该有提过的。肯定应该讲过。肯定应该讲话，这是跟标签嘛，是不是它的可外可的就是什么，我们的视口的高管吗？懂吗？啊，我说过最后关于尺寸，关于位置的API，我会给你们去整理一遍的，那么你先记住这就是视口的，还有一个视口的高度是不是拿到之后，比如说干嘛我们把这个开放式的背景，我们说是不会颜色的来看一下，你看整张用这个颜色。

是不是啊，OK，来看一下，那怎么办，现在啊，现在当一天天空是灰的嘛，是吧，OK，那我们说这个鸟，这个鸟是不是应该飞进来了，是我们说抓一麦角，首先你上来是不是卖讲其实应该是什么。你在什么位置上吗？是不是你在什么位置上，看下我们卷一卷一面积的A。呃，不是，应该是图片。转1IMAGE是吧，Xyy嘛是吧，那怎么办？写零零嘛是吧，其实你Y你不写就是什么默认图片的构画，比如我们看一下。是不是太快了？是不是啊，20不是只跑了一次啊，为什么只跑一次啊？因为说没了，后面想我这个是一直在加价，我说总共就就什么几张图啊八张吧，我说耶什么，那怎么办，那等等于八的时候一吗。

应该重新回到零零吧。不不应该会到一，应该到九的时候了呢，是吧，因为我这个在前面嘛，是吧，每次进来是先加加的嘛，是吧，那我到八的时候干嘛，到八的时候应该直接过来是不是，因为我是最后一张嘛，好OK，走你看见没有，是不是太快了，那飞稍微慢一点。因为在CTRLCCTRL。是不是这样的，没太大问题吧，现在边让它往前飞啊，OK，怎么上，而且而且你没发现这个图片是由这个图片其实不是一个，就是它其实是一个矩形。

它旁边填充的不是透明色，填充是白色啊，这个是就尴尬了，那你这个背景不能就啊灰色，你的背景应该是白色W7。是吧，这跟图片的设计有关系。是不是，而且他得往前飞吧，是不是OK，其实往前飞你看好效果更好，怎么怎么让他往前飞。动谁啊？怎么让这个鸟王？怎么让这个鸟往前走啊？怎么让这个鸟往前走啊？我们说过，做开发式动画就会覆盖。每次都是覆盖是不是怎么让再往前？你不要管前面这一次了，怎么它往前不就控制看吗？这不代表它X上面一个位移吗。是不是啊，那怎么办好做我画一个什么，比如说我还是在这里面画一个。

嗯X嗯，这么value吧V是吧，等于零吧，每次进去完全去玩这个value干嘛不要加加加加太慢了，加等于十吧是吧，那我把这个value干嘛直接。塞过来是就可以了，这个白头我是可以看到的吧，是不是啊，这你来看一下，刷一你看掉毛的吧，是不是，它是不是再往前飞啊，我说为什么掉毛，因为你没请是不是啊，OK，跟他想想，照我的理解的话，其实我每一次在这边应该是一个一整只的鸟。我走的是10万，如果走走走大一点，大概是不是，那就不是显示毛了吧，那就那那有点吓人了。

啊，其实每次是不是只动一点点，你看前面是有干嘛，是有一点残留的，有没有看到点点点吗？是不是啊，OK，我们说干嘛，你这边如果给的越大，看到鸟的部位越大，是不是给一百五的话就干嘛，这鸟还会分身，看到没有是啊啊，那我给小一点，给个十差不多是吧？给十就是掉毛是那干嘛？如果你不想看到它掉完怎么办？每次干嘛进了循环电视干嘛一是吗？怎么清啊，CTS不管了，这干嘛啊，零零什么。CT点其实就什么开点点开点是的，他听的是整个市口吧，这里你该是不就出来了懂吗？好，那这个我们说这种这种就是动画是跟图片有关系的吧，所以说在看va这面怎么去引入图片很重要，因为我们很多动画是跟图片有关系的。

懂吗？啊，所以说在开发中引入图片是大家必须得会的，懂吗？OK。