- 金属破碎机
- 破石机
- 石头破碎机
- 颚式破碎机
- 反击式破碎机
- 锤式破碎机
- 复合式破碎机
- 冲击式破碎机
- 立式复合破碎机
- 重锤式破碎机
- 花岗岩石破碎机
- 高效破碎机
- 双齿破碎机
- 煤矸石破碎机
- 四辊破碎机
- 环锤式破碎机
- 小型破碎机
- 双轴破碎机
- 单辊式破碎机
- 对辊式破碎机
- 圆锥式破碎机
- 振动给料机
- 圆振动筛
- 斗式提升机
- 直线振动筛
- 电磁振动给料机
- 滚筒筛沙机
- 高频筛
- 振动筛
- 滚筒洗石机
- 干式磁选机
- 螺旋溜槽
- 螺旋分级机
售后服务
客户购机前，金狮贵宾会登录网址免费派工程技术人员到用户现场为用户规划场地、...
- 确实如答主所说，如果页面太多可能Hype这样的应用会比Framer更适合做原型，但是最新版的Framer发布后在处理「多页面」跳转方面已经大大的改善，可以有效的利用Design里的画板来做不同页面之间的跳转。另外不能忽略的是Framer是最接近编程的原型工具，依托web有大量的第三方库，它几乎能做到和真正的APP一样强大。举几个例子你能用关于three.js的库来做各种3D模型和交互，能用关于Firebase的库来实现数据的在线存储和读写，能使用关于MapBox的库来导入实时地图，还有很多很强大的库，并且随着Framer的流行可能还会更多。如果你有一些很有意思的想法，拿Framer做一个简单的Demo所需要的工作量会比你真正编程要少的多，并且效果几乎相同。分隔线下面是金狮贵宾会登录网址最近用Framer做了一个飞机大战的小游戏的制作过程，游戏实现了伤害判定、游戏难度增加、多属性敌人、玩家游戏数据存储等功能，希翼具体的例子对你会更有参考。-----------------------------------------------------------------------------------在线试玩和源码下载：飞机大战-进阶版（注意会有声音播放）为什么是Framer？一直以来高保真可交互原型工具主要分为两大阵营，以「Page」为基础的轻量化工具如：Hype(它其实不轻，而且到高阶必然需要写js)、Principle、Flinto，以「Patch」为基础的OrigamiStudio、Form。Framer在其中应该算一个异类，它要解决的其实和Patch类原型工具是一样的问题：如何处理逻辑比较复杂的非线性交互原型？OrigamiStudio和Form给出的答案是类似电子元件有输入输出接口的Patch，而Framer的答案是「代码」。笔者在这里其实很难苟同两者各有优势，拿OrigamiStudio来说，在处理复杂交互逻辑的前提下必然会连出可读性较差的Patch图。https://img.zl-hj.com/images/2017/6/4/upload/577344a40cf26eb8c9cb7d1d_ec9a85c5-cd0b-411c-ae62-e34c17962298.jpg/s150070OrigamiStudio的Patch连线图而需要写代码的Framer虽然一开始学习曲线仍然比较陡峭，但代码对处理复杂的逻辑和生成重复性的元素具有天然的优势，并且长久以来程序猿们也总结出了各种增加逻辑可读性的书写代码方法。Framer基础这部分的内容新手可以参考官方的最新教程：Framer-Basics，只要了解到最重要的Layer、State、Animation即可。然后可以适当了解下关于程序逻辑的这部分内容：Framer-Programming和一些Framer自带的函数:Framer-Docs。游戏的基本规则和目标这是一款十分简单的游戏，玩家用手指拖拽一架战机，战机会自己发射激光子弹射向不断朝你飞来的陨石，子弹射中陨石后会爆炸得分，相反陨石砸中战机，则生命值减少，总共有三段生命值。伴随你的得分增加，陨石会越来越多，同时子弹射速也会增加，最终目标是在生命结束前获得更多的得分。开始搭建游戏初始化页面首先初始化页面包含的元素有：背景游戏标题生命值游戏得分战机开始按钮1.背景，选择一下Framer的默认交互设备为苹果7，同时设置一下背景颜色即可。bg=newBackgroundLayerbackgroundColor:"rgba(0,17,41,1)"2.游戏标题和开始按钮，这里放到一起说的原因是标题和开始按钮在游戏开始后都需要消失，因此都会有一个不透明度变为0的「State」。在书写图层尺寸和位置的代码时应该考虑不同设备尺寸的适配，通过使用midX、midY和获取当前屏幕尺寸Screen.width、Screen.height等方法来达到自适应的目的。#初始化标题title=newLayerheight:107image:"images/TITLE.png"width:601midX:Screen.width/2y:289#标题的“hide”状态，透明度变为0title.states.hide=opacity:0animationOptions:time:0.5#初始化开始按钮startButton=newLayerheight:106midX:Screen.width/2y:Screen.height-250width:370image:"images/START.png"#开始按钮的“hide”状态，透明度变为0startButton.states.hide=opacity:0animationOptions:time:0.5如果仅仅是透明度变为0，在开始按钮被写上onClick方法后还是能被触发的，因此开始按钮在完成转变为「hide」状态后需要被抹除,使用.destory()方法。#当开始按钮转变为“hide”状态后，把它真正的抹除掉startButton.onStateSwitchEnd->startButton.destroy()3.得分，需要用到「TextLayer」可以参考这部分内容：Framer-Docs其text属性是字符串类型，它的值就是要显示的分数，金狮贵宾会登录网址先初始化为“0”。这个值在游戏开始后随着得分增加而变化，因此需要在字符串中使用嵌入表示法#{}来引用其他变量，这个方法会在后面用到。coin=newTextLayerheight:54image:"images/coint.png"width:140x:Screen.width-160y:19text:"0"fontSize:50lineHeight:1textAlign:"center"paddingLeft:50color:"#ffffff"4.生命值，为了代码书写简单金狮贵宾会登录网址用了一种较笨的方法，三张图片依次显示剩3段生命值、剩2段生命值、剩1段生命值的情况，最开始是3段生命值的图片。https://img.zl-hj.com/images/2017/6/4/upload/577344a40cf26eb8c9cb7d1d_f839452c-236f-43d0-8ff4-a4046bc3fb3f.jpg/s150070生命值的三种状态health=newLayerheight:62image:"images/health-3.png"width:255x:20y:105.战机，设置它的拖拽速度，以及拖拽范围，这部分内容可以参考Framer-Docs，同时为了表现在被陨石击中后短暂的红血状态，使用了两张战机图片来生成两种状态default和damage。https://img.zl-hj.com/images/2017/6/4/upload/577344a40cf26eb8c9cb7d1d_f1244b57-b367-406b-afbb-4903496e3ec3.jpg/s150070#战机初始化plane=newLayerborderRadius:4image:"images/plane.png"y:Align.centerheight:302width:173midX:Screen.width/2#设置战机的拖拽属性plane.draggable=trueplane.draggable.speedX=1plane.draggable.speedY=1plane.draggable.constraints=Screen.sizeplane.draggable.overdrag=false#设置战机的两种状态和状态转换的动画时间plane.states.default=image:"images/plane.png"plane.states.damage=image:"images/plane-damage.png"plane.states.animationOptions=time:0.26.点击开始按钮，由于目前还没有写游戏的其他逻辑，开始按钮只触发标题和开始按钮的消失状态。以后会添加其他需要被触发的方法如：子弹的发射、陨石的掉落等。startButton.onClick->startButton.animate("hide")title.animate("hide")最后初始化界面完成后，就会得到类似下图的样子：https://img.zl-hj.com/images/2017/6/4/upload/577344a40cf26eb8c9cb7d1d_7a32543a-3196-436c-af3f-5a8b3b88d6e5.jpg/s150070游戏开始界面让战机发射子弹这里的子弹为了简单方便，设计成蓝色激光，用shadowBlur等属性来表现子弹的光芒，同时创建一个Animation是子弹朝屏幕的上边缘飞去，通过midX=plane.midX来保证每一发子弹的起止发射点都是战机的中心，最后当飞出到屏幕上边缘后便被抹除掉，不然会影响游戏性能。另外需要设置子弹的父类为bg(就是开始初始化页面的那个背景图层)，这样做的好处在于生成了一个拥有所有bg子类的数组，金狮贵宾会登录网址可以方便的用forinbg.children来遍历所有的子弹。同时为了不断的生成子弹把它们都写在一个函数方法中方便调用，将这个函数命名为shootFunction。shootFunction=->bullet=newLayerwidth:8height:80midX:plane.midXy:plane.ybackgroundColor:"rgba(33,196,255,1)"borderRadius:30parent:bgshadowSpread:2shadowColor:"rgba(79,242,255,0.6)"shadowBlur:15shoot=newAnimationlayer:bulletproperties:y:-Screen.height-bullet.heighttime:1.7curve:Bezier.easeOutshoot.start()shoot.onAnimationEnd->bullet.destroy()如果你运行这个函数一次你会发现，它只能生成一发子弹，而在游戏开始后，金狮贵宾会登录网址需要战机不断的发射出子弹，这里就需要用到Framer另一个自带的方法Utils.intervalx,->shootFunction()，它可以设置每x秒实行一次shootFunction这个函数，就等价于每x秒会发射出一发子弹，关于这个方法可参考：Framer-Docs，同样为了方面以后调用，金狮贵宾会登录网址把这个方法一起写到一个函数中，同时将这个间隔时间作为函数的参数。intervalShoot=(shootSec)->Utils.intervalshootSec,->shootFunction()将这个intervalShoot方法添加到之前开始按钮的点击事件中，把参数设为0.5即每次子弹发射间隔时间为0.5秒。startButton.onClick->startButton.animate("hide")title.animate("hide")#新增到下方intervalShoot(0.5)点击开始游戏效果https://img.zl-hj.com/images/2017/6/4/upload/577344a40cf26eb8c9cb7d1d_6e34021d-a3bb-4dd4-b9ae-4fd978a81db1.jpg/s150070子弹发射效果陨石的下落和伤害判定这里的下落和子弹的发射其实很类似，不同的是需要用到一个Framer自带的Utils.randomNumber()随机数方法来生成水平位置不同的陨石，并且需要一个陨石自转的动画，随机数方法可参考：Framer-Docs。同样把它们都写进一个函数中，函数命名为rockNormalFunctionrockNormalFunction=->enemy=newLayerwidth:100height:100x:Utils.randomNumber(0,Screen.width-100)y:-100index:500image:"images/rock-normal.png"rotate=newAnimationlayer:enemyproperties:rotation:900time:3curve:Bezier.easeInmove=newAnimationlayer:enemyproperties:y:Align.bottomtime:3curve:Bezier.easeInmove.start()rotate.start()move.onAnimationEnd->enemy.destroy()关于伤害的判定，这里包含两钟判定，第一种是陨石是否砸中战机，另一种是子弹是否击中陨石，相应的如果是陨石击中战机，那么战机的生命值就要减少，如果是子弹击中陨石，那么游戏得分应该增加。在这里金狮贵宾会登录网址新建一个完全透明对游戏无干扰的图层，用这个图层的x和y来分别代表生命值和得分。#healthAndCoins的x代表生命值，y代表得分healthAndCoins=newLayeropacity:0height:1width:1x:3y:0这样做的好处在于增加了代码的耦合性，举个例子就是金狮贵宾会登录网址可以在陨石砸中飞机的方法中简单的写healthAndCoins.x-=1来代表生命值减少，同时在healthAndCoins.on"change:x"方法中写生命值减少后会触发那些变化。而不需要把这些方法都写在陨石砸中飞机的方法中。另一个原因是Framer的onchange方法不能监听普通变量的变化，用隐形图层的x和y来表示也是一种妥协。接下来在rockNormalFunction中继续写上陨石砸中飞机和陨石被子弹击中的判定方法，使用逻辑方法if来进行判断，通过forbulletinbg.children来遍历到所有子弹的位置，可以参考这部分内容：Framer-Programming。在子弹接触到陨石后会先开始一个爆炸动画然后才会消失，同时游戏得分增加即healthAndCoins.y+=1。在陨石砸中飞机后，生命值减少即healthAndCoins.x-=1，同时陨石被抹除。#写在rockNormalFunction函数中enemy.on"change:y",->forbulletinbg.childrenif(bullet.midX>enemy.x&&bullet.midX<enemy.maxX)&&(bullet.midY>enemy.y&&bullet.midY<enemy.maxY)&&(enemy.y>0)explode1=newAnimationlayer:bulletproperties:scale:10opacity:0.5backgroundColor:"#FFCB14"shadowSpread:10shadowColor:"#FF9100"shadowBlur:10blur:2time:0.07animationOptions:curve:Bezier.easeInOutexplode2=newAnimationlayer:bulletproperties:height:8time:0.00001explode1.onAnimationStart->explode2.start()explode1.onAnimationEnd->bullet.destroy()explode1.start()healthAndCoins.y+=1enemy.destroy()if(enemy.maxX>plane.x&&enemy.x<plane.maxX)&&(enemy.midY>plane.y&&enemy.y<plane.midY)ifhealthAndCoins.x>0healthAndCoins.x-=1enemy.destroy()同样的，为了不停的有陨石出现，需要写上Utils.interval函数来调用rockNormalFunctionintervalRock=(rockSec)->Utils.intervalrockSec,->rockNormalFunction()将这个intervalRock方法添加到之前开始按钮的点击事件中，把参数设为1，每次陨石降落间隔时间为1秒。startButton.onClick->startButton.animate("hide")title.animate("hide")intervalShoot(0.5)#新增到下方intervalRock(1)点击开始游戏效果https://img.zl-hj.com/images/2017/6/4/upload/577344a40cf26eb8c9cb7d1d_49f2a602-5bbc-40a8-aedb-1ff7e440885e.jpg/s150070陨石降落效果生命值变化和死亡页面上面已经提到通过healthAndCoins.on"change:x"方法可以监听生命值的变化，一旦变化就会触发战机红血状态，短暂的红血状态结束后会恢复到普通状态。同时health图层的image属性修改为对应的图片地址，image属性的值使用嵌入表示法#{}来生成不同的图片地址，图片名提前命名为有规律的health-1、health-2、health-3。healthAndCoins.on"change:x",->plane.animate("damage")Utils.delay0.15,->plane.animate("default")ifhealthAndCoins.x>0health.image="images/health-#{healthAndCoins.x}.png"当生命值等于0即healthAndCoins.x==0时即触发死亡页面，死亡页面显示你的最终游戏得分，并且有一个重新开始按钮点击可以重置游戏，重置方法为location.reload()，这里比较有趣的是Framer并没有在官方文档中提供此方法来刷新页面，但只要你知道这个方法在JS语法中是有效的，那么用在Framer中通常可行，很多类似的方法Framer官方的文档都没有提到，需要多去尝试。死亡页面出现的代码也要写在healthAndCoins.on"change:x"方法中，在上面代码的下方。elseifhealthAndCoins.x<1deadScreen=newLayerimage:"images/dead-screen.png"width:Screen.widthheight:Screen.heightindex:1000opacity:0showDead=newAnimationlayer:deadScreenproperties:opacity:1time:1showDead.start()restartButton=newTextLayerwidth:Screen.width*0.8textAlign:"center"height:Screen.height/2*0.15y:Screen.height-Screen.height/2*0.15-50midX:Screen.midXborderRadius:8backgroundColor:"rgba(255,187,75,1)"fontSize:Screen.height*0.15/4lineHeight:2color:"#792809"text:"Restart"fontWeight:800opacity:1parent:deadScreenfinalNumber=healthAndCoins.ycoinDead=newTextLayerheight:54image:"images/coint.png"width:147midX:Screen.midXscale:Screen.width/750*1.5y:Screen.width/750*700text:"#{finalNumber}"fontSize:50lineHeight:1paddingLeft:40textAlign:"center"color:"#ffffff"restartButton.onClick->location.reload()https://img.zl-hj.com/images/2017/6/4/upload/577344a40cf26eb8c9cb7d1d_4103d14a-4977-4bad-9e6f-ec0e137b7d91.jpg/s150070死亡页面效果游戏得分的变化和难度的增加和上面生命值的变化相同，使用healthAndCoins.on"change:y"来监听healthAndCoins.y的变化，并实时更新到coin图层text的值中。healthAndCoins.on"change:y",->coin.text="#{healthAndCoins.y}"在得分变化到某些特定的值后（这里定义的是10乘2的整数次方），游戏难度就会提升，intervalRock()方法和intervalShoot()方法会再次被触发来增加陨石数量和子弹射速，子弹射速增加到一定程度后会停止增加，而陨石的数量会随着得分的不断增加而一直增加。把这些写到同一个函数方法中命名为uprageGame()level=1uprageGame=(uprageLevel)->if(healthAndCoins.y>10*(Math.pow(2,level)))&&(healthAndCoins.y<10*(Math.pow(2,level+1)))&&(level==uprageLevel)iflevel<3intervalShoot(0.5)intervalRock(1)level+=1在healthAndCoins.on"change:y"方法中循环uprageGame()100次，来应对比较极端的情况。healthAndCoins.on"change:y",->coin.text="#{healthAndCoins.y}"#新增到下方foriin[1..100]uprageGame(i)进行到这里一个简单的飞机大战游戏就完成了，试玩或下载源代码飞机大战-基础版如何增加可玩性？1.增加敌人的丰富性，单一的陨石很容易让游戏变得无聊，可以考虑三种不同的陨石来增加游戏的可玩性。https://img.zl-hj.com/images/2017/6/4/upload/577344a40cf26eb8c9cb7d1d_55ee5dcf-dec6-47ed-b294-283572dbfc0e.jpg/s150070其中左一是最普通的陨石，左二是合金陨石，它的体积更大同时需要两发子弹才能将它击毁，在被击中一次后会退变成普通陨石的形态。左三是红色的陨石，它的速度更快，并且它不是垂直朝下降落的，会有随机的斜率，考虑到战机的子弹总是垂直向上发射，斜飞的红色陨石会更有威胁。2.增加游戏排名系统，玩家在结束一轮游戏后可以输入自己的名字，系统会保存玩家的得分，并且会显示前十名玩家的得分排行榜。这部分功能的实现得益于Framer丰富的扩展库，西方的Marckrenn同志为Framer做了一个读写Firebase的module：Framer-Firebase，让原型工具进行在线数据存储和读写成为可能。https://img.zl-hj.com/images/2017/6/4/upload/577344a40cf26eb8c9cb7d1d_a4dad7e7-05cd-4c45-b21e-8d36c214193e.jpg/s1500703.加上BGM和子弹音效，Framer官方文档中没有单独的声音图层说明，但是直接使用newAudio就可以新建一个声音图层，具体声音图层属性的设置可以参考这里Framer-Audio根据以上三个方向金狮贵宾会登录网址对游戏的基础版进行了改进，试玩和源码下载：飞机大战-进阶版（注意会有声音播放）
FramerStudio适合做什么
2020-01-01 22:44:30
- 上一条：上一篇：VRAR和MR的区别
- 下一条：下一篇：澳大利亚到底哪里好
