c++图形中如何判断鼠标点击在一条直线上_Animate/FLASH如何模拟小球滚动效果

这篇教程详细介绍了如何使用Adobe AnimateCC创建一个从坡顶滚落到坡底的小球动画。通过绘制斜坡和小球,插入关键帧并创建传统补间动画,模拟了小球滚动的动态效果。为了使动画更逼真,还调整了缓函数来模拟小球加速滚动的过程。这是一篇适合初学者的Flash动画制作指南。
摘要由CSDN通过智能技术生成

a11bf50140d206fd266a5e9509373e65.png

使用FLASH可以模拟各种物理现象、化学现象或者现实中的各种反应,这里就讲一下如何制作从坡顶滚落至坡底的动画。

FLASH如何制作跳动的小球-百度经验​jingyan.baidu.com

适用软件:Animate CC及其它FLASH软件

制作步骤:

1.这里用的是Animate CC,打开软件,新建AS3文档。

b876dd210146f3dcc3e5a97daad64eae.png

2.使用直线工具,绘制一个斜坡,并填充颜色,如图所示

d30d2635b5ba0752e493c4d5d5f2d3de.png

3.绘制一条直线与斜坡底部对齐

37023066b3573f14237c206fc851ca75.png

4.新建一个图层,在时间轴左下角找到新建图层的按钮,点击即可创建新的图层

9b1c0eccb3052e560ae2c8b6f28ee65b.png

5.工具栏找到椭圆工具,在新建的图层上绘制一个圆形,注意在绘制的时候按住shift键即可绘制标准的圆形

e5f971e3579f73e55716a44199be99fe.png

67061ea389ffa1d3efcb8634009fe608.png

6.选择圆形,然后点击鼠标右键选择转换为元件,或者使用快捷键f8,将圆形转换为图形元件

4fec79207c0c82cfe34256eafdc644ab.png

7.操作后会弹出转换面板,这里需要选择图形元件,并且需要注意注册点在中心位置。

1091a3ea63d4fc75cbc09d8103151daa.png

fc00c14d7b0fe4b05b0730d09c7e4473.png

8.使用鼠标拖选两个图层的第60帧,右键选择插入帧,或者使用快捷键f5

3c2c0733e9c44a948c1937d21e90d6d3.png

a4cb20fc8ddb78e61d5e3ce835122bc5.png

9.接下来制作滚动动画,在圆形元件的第30帧和第60帧插入关键帧,可以使用快捷键f6

619df6b48c9d65485920857ad93f4145.png

10.在第30帧处,将圆形元件移动到斜坡右下角,如图所示

82c709add2347194d82159f19122fb2f.png

11.在第60帧处,将圆形元件移动到如图所示位置

824caf64b18ee768bc05b50c20e92b12.png

12.选择第1个关键帧到第2个关键帧之间的普通帧,右键选择创建传统补间动画

ac8d6619e8de51982a046d31bb8ac914.png

1732ca7307305e14cc90a4597689ad82.png

13.同样的,在后面创建传统补间

cdf25a101466a3874f385ec301c20f2b.png

ef0c4ffe45de4af8c5f888e5e183da14.png

14.现在得到的动画效果如图所示

a89587e2139ad63cfafb32b13fec04d5.gif

15.在现实中,小球从坡顶向下滚动是一个加速过程,所以选择补间,在属性面板设置缓函数

bd259ba716c49920cde862ff0a899d51.png

8c41869b4e8d711118aa28c5edfa1d7c.png

16.这样动画就变得更加逼真了

e00771a1e2ece275a434e4d5909b9212.gif
如果感觉我们的文章很有用,记得分享给朋友或同学,让更多人方便的学习到实用的Flash知识。
主要是模拟的物理实验的有源代码,可供初学者使用! 采用 MFC 编制 MVC 模式之球体演示程序 作者:haykey 下载源代码   在传统面向过程的程序设计,往往采用 Input-Processing-Output 模式,这“归功”于 DOS 操作系统的单任务。当 Windows 图形界面 OS 出现后,MVC(Model-View-Controller)模型更适合 Windows 图形界面程序的设计,它将数据处理和数据显示分离开,使维护,扩展系统更加灵活 。其,View:负责 显示数据,它从Model处获得数据然后显示。当然,一个Model会有用户可从不同角度来观察的多个View。Model:存储数据以及对数据进行各种运算和处理 。Controller:负责接受用户输入,并且把用户输入转换成对 Model 的操作。因此Controller 可能会修改 Model 的数据,当数据修改后,更新 View。其结构示意图如下:   一直采用MFC编程的朋友可能不太熟悉它,这是因为MFC的文档视图结构就是基于MVC的高层结构,这蒙蔽了我们的双眼。虽然MS替我们做了,我们还是有必要接触它,以在SDK or 其他地方有的放矢。我做了一个球体演示的例子,其界面如下:   左侧两个表面积和体积Edit让使用者从文本的角度精确地观察,我们称其为TextView。右侧为从CStatic派生的CGraphicView,使得人们可直观地观察Sphere.对话窗口CMVCSphereDlg是控制器,来获取用户的键盘输入(输入半径后回车)和在Static上的鼠标点击与拖动(可动态调整球体半径并实时反馈球体变化)而CSphere类是模型,存储了球体半径和计算表面积,计算体积等处理半径数据的操作.   现在让我们详细看看代码,来感受下Model,View,Controller之间如何关联,如何协同工作的。 class CSphere { public: ... .... //更新Graphic-VIEW BOOL UpdateGraphicView(HWND hWnd,const CRect &rect,BOOL bErase); //更新Text-VIEW void UpdateTextView(); //外界Controller的接口:设置球体半径 void SetRadius(float r); private: //球体半径 float m_fRadius; //计算球体表面积 float CalculateArea(float radius); //计算球体体积 float CSphere::CalculateVolumn(float radius); };   这里面 UpdateTextView,UpdateTextView 就是当用户输入新半径或拖动鼠标 Controller 捕获后通知 Model,Model 通知两个View更新显示 。具体代码如下: BOOL CSphere::UpdateGraphicView(HWND hWnd,const CRect &rect,BOOL bErase) { //data format examination if(!::IsWindow(hWnd)||::IsRectEmpty(&rect)) { AfxMessageBox("View is not created by now or rect is empty"); return false; } //get the window pointer from window handle CWnd *pView = CWnd::FromHandle(hWnd); if(pView == NULL) return false; //set graphic view''s radius in order to painting ((CGraphicView*)pView)->SetRadius(m_fRadius); bPaintSphere = true;//set paint tag true //repaint if(!::InvalidateRect(hWnd,&rect,bErase)&& !::UpdateWindow(hWnd)) { AfxMessageBox("UpdateView failed"); return true; } pView = NULL; return false; } void CSphere::UpdateTextView() { CMVCSphereDlg *parent = (CMVCSphereDlg *)AfxGetMainWnd(); CWnd *wnd1 = parent->GetDlgItem(IDC_SURFACE); CWnd *wnd2 = parent->GetDlgItem(IDC_VOLUMN); CString str; str.Format("%.2f平方米",CalculateArea(m_fRadius)); wnd1->SetWindowText(str); str.Empty(); str.Format("%.2f立方米",CalculateVolumn(m_fRadius)); wnd2->SetWindowText(str); } CGraphicView绘图关键代码如下: void CGraphicView::OnPaint() { ... ..... if(!bPaintSphere) dc.DrawText("球体演示",rect,DT_VCENTER|DT_CENTER|DT_SINGLELINE); else { int r=(int)m_radius;//半径取整 CPoint MiddlePoint = rect.CenterPoint();//以矩形框的心为球心 int x=MiddlePoint.x; int y=MiddlePoint.y; oldpen = (CPen*)dc.SelectObject(&solid_pen); oldbru = (CBrush*)dc.SelectObject(&brush); dc.Ellipse(x-r,y-r,x+r,y+r); //先画一个圆形 dc.SelectObject(&dash_pen); dc.Arc(x-r/2,y-r,x+r/2,y+r,x,y-r,x,y+r); //再画4个半圆弧 dc.Arc(x-r/2,y-r,x+r/2,y+r,x,y+r,x,y-r); dc.Arc(x-r,y-r/2,x+r,y+r/2,x-r,y,x+r,y); dc.Arc(x-r,y-r/2,x+r,y+r/2,x+r,y,x-r,y); ... ... } } 关于控制器CMVCSphereDlg响应用户输入半径回车核心代码如下: BOOL CMVCSphereDlg::PreTranslateMessage(MSG* pMsg) { UpdateData(); //violation examination if(m_r100) { AfxMessageBox("半径输入范围(0---100)"); return false; } if(pMsg->message == WM_KEYDOWN) if(pMsg->wParam == VK_RETURN)//回车 { CRect rect; m_GraphicView.GetClientRect(rect); m_Sphere.SetRadius(m_r);//把用户输入转换成对Model的操作 m_Sphere.UpdateTextView();//更新View m_Sphere.UpdateGraphicView(m_GraphicView.GetSafeHwnd(),rect,true);//更新View return true; } ... ... } 响应鼠标拖动核心代码如下: void CMVCSphereDlg::OnMouseMove(UINT nFlags, CPoint point) { CRect rect; m_GraphicView.GetClientRect(rect); CPoint middlepoint = rect.CenterPoint(); //if click on the graphic view if(rect.PtInRect(point)&&bIsDragging) { double dbDistance2 = (point.x-middlepoint.x)*(point.x-middlepoint.x)+(point.y-middlepoint.y)*(point.y-middlepoint.y); double dbDistance = sqrt(dbDistance2); if(dbDistance>100.) dbDistance = 100.; m_r = (float)dbDistance; //update radius edit UpdateData(false); m_Sphere.SetRadius(m_r); m_Sphere.UpdateTextView(); m_Sphere.UpdateGraphicView(m_GraphicView.GetSafeHwnd(),rect,true); } ... ... } 该程序功能简单,只是示例性说明采用 MFC 如何实现MVC模型,就当抛砖引玉了。具体实现参考源代码例子。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值