首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

开源新手引导框架,支持TypeScript

Shawn的GitChat新手引导框架已经有超过150人订阅,在此期间有不少伙伴给出了正面的评价,让我有了继续优化改进的动力。...新手引导开放源码 ? 最后为了感谢大家对新手引导框架的支持,如果没有大家的帮助,新手引导框架也不能达到很好的改进,成为真正实用的工具,在此Shawn决定将新手引导代码仓公开。...请在公众号上回复【新手引导源码】即可获得。...新手引导框架借用了Cocos官方案例demo-ui工程,新手引导框架源码、资源全部都在GodGuide目录,其中task1.js、task2.js 是编写的引导任务脚本,你可以将 GodGuide 复制到自己的项目进行实践...如果对新手引导框架,还不太了解的伙伴可以看下面的介绍: ? 感谢您对「Creator星游戏开发社区」公众号的支持,愿我们在前进的道路上砥砺前行,共同成长! ?

1.4K30

如何实现前端新手引导功能?

在产品发布新版本或者有新功能上线时,经常需要新手引导功能来引导用户了解应用。下面就来分享几个开箱即用的新手引导组件库,帮你快速实现新手引导功能!...Intro.js Intro.js 是一个使用广泛的产品引导库,它在 Github 上拥有 21.6k Star。其具有以下特点: 无依赖:它不需要任何其他依赖。...小而快:库文件较小使得引导过程流畅直观。JavaScript 文件的整体大小为 10KB,CSS 为 2.5KB。 用户友好:提供可以根据喜好选择的各种主题。...div> ); } } Github:https://github.com/gilbarbara/react-joyride Vue Tour Vue Tour 是一个轻巧、简单且可自定义的新手指引插件...在 GitHub 上拥有 3.2K Star,它提供了一种简单的方式来引导用户浏览网站和应用。

2.7K60
您找到你想要的搜索结果了吗?
是的
没有找到

WPF怎么做新手引导界面?

原文作者:眾尋 原文链接:https://www.cnblogs.com/ZXdeveloper/p/8391864.html ---- 这两天不忙,所以,做了一个简易的新手引导小Demo。...新手引导功能的话,就是告诉用户,页面上操作的顺序,第一步要做什么,第二步要做什么,以此类推,然后,最终关闭新手引导页面。 以我的习惯,还是先给大家看看效果。...要实现这个功能化,那思路就是大概以下几项: 一、遮罩窗体 将主窗体进行遮罩,半透明的效果,常用的做遮罩的话,一般是设置一个底色,然后设置透明度,类似于这篇博客 WPF透明窗体制作[1],但是,在实际的操作用就会遇到问题...这是由于弹出的引导窗体获取了主窗体的大小,但是Point去获取控件坐标位置的时候,主窗体是不包含头部的,由于遮罩没有头部,所以定位出错了,这个我还没有找到好的解决办法,如果有大神知道如何解决的话,请赐教...显示引导内容的部分,也可以换成一个Grid,这样的话,就可以传入UserControl了,有兴趣的朋友可以自行修改。

1.2K20

前端开发如何做新手引导

通常,在产品发布新版本或者有新功能上线时,都会开发一个新手引导功能来引导用户了解应用的功能。在前端开发中,如何快速地开发新手引导功能呢,下面介绍几个开箱即用的新手引导组件库。...https://github.com/shipshapecode/angular-shepherd 3,React Joyride React Joyride 是一款用于向用户介绍新功能的React项目新手引导库...npm i react-joyride 然后,在引导页面使用以下方式来在 React 中使用 react-joyride。...div> ); } } 项目链接:https://github.com/gilbarbara/react-joyride 4,Vue Tour Vue Tour是一个轻巧、简单且可自定义的新手指引组件...,在GitHub上拥有3.2K的Star,它提供了一种简单的方式来引导用户浏览网站和应用。

2.3K31

WPF怎么做新手引导界面?

原文作者:眾尋 原文链接:https://www.cnblogs.com/ZXdeveloper/p/8391864.html ---- 这两天不忙,所以,做了一个简易的新手引导小Demo。...新手引导功能的话,就是告诉用户,页面上操作的顺序,第一步要做什么,第二步要做什么,以此类推,然后,最终关闭新手引导页面。 以我的习惯,还是先给大家看看效果。...要实现这个功能化,那思路就是大概以下几项: 一、遮罩窗体 将主窗体进行遮罩,半透明的效果,常用的做遮罩的话,一般是设置一个底色,然后设置透明度,类似于这篇博客 WPF透明窗体制作[1],但是,在实际的操作用就会遇到问题...这是由于弹出的引导窗体获取了主窗体的大小,但是Point去获取控件坐标位置的时候,主窗体是不包含头部的,由于遮罩没有头部,所以定位出错了,这个我还没有找到好的解决办法,如果有大神知道如何解决的话,请赐教...显示引导内容的部分,也可以换成一个Grid,这样的话,就可以传入UserControl了,有兴趣的朋友可以自行修改。

1.1K10

WPF|快速添加新手引导功能(支持MVVM)

前言 案例一 站长分享过 眾尋 大佬的一篇 WPF 简易新手引导 一文,新手引导的效果挺不错的,如下图: 该文给出的代码未使用 MVVM 的开发方式,提示框使用的用户控件、蒙版窗体样式与后台代码未分离...,但给大家分享了开发新手引导功能的一个参考。...案例二 开源项目 AIStudio.Wpf.Controls,它的新手引导效果如下: 此开源项目也有参考上文(WPF 简易新手引导),并且重构为 MVVM 版本,方便绑定使用。...见上面的 示例三效果; b:绑定目标控件与引导属性 目标控件的引导属性与目标控件引用绑定,引导界面显示时通过目标控件计算出目标控件的位置和大小,准确将目标控件标识出来,引导提示框定位也才能正确设置: <...控件带的两个新手引导Demo如下: 新手引导Demo一 GuideControl方式,站长推荐,即以控件的方式显示新手引导,点击看代码: 新手引导Demo二 GuideWindow方式,即以子窗体的方式显示新手引导

2.3K10

unity--实现新手引导功能 一:矩形镂空功能 三、新手引导的方法封装四、事件渗透五、完善优化

2; center.y = targetCorners[0].y + (targetCorners[1].y - targetCorners[0].y) / 2; //设置材质的中心点....x - targetCorners[0].x)/2; height = (targetCorners[1].y - targetCorners[0].y)/2; //设置材质的宽高...三、新手引导的方法封装 1、在GuideBase中加上[RequireComponent(typeof(Image))],保证有image组件,而且移除不了。    材质的初始化,不在start中了。...update测试代码注释了) 创建变量包括(矩形引导脚本组件、圆形引导组件、矩形材质、圆形材质(根据情况,自己选择需要的材质,就不用自己手动拖到Image组件的Material上了),Image组件)...初始化,获得(引导页面)的圆形、矩形组件、image组件 创建方法Guide(参数:canvas\镂空组件\引导类型),在这里用switch using System.Collections; using

4.6K30

如何将新手引导模块化 By:唐糖棠

一开始想写的是一篇关于游戏新手引导设计的文章,但是新手引导这是一块说简单会很简单,但是说难又会非常难的东西,所以我会把整个新手引导分为很多方向来整理,今天这篇文章主要讲的是新手引导组成模块。...二、何为新手引导 每个刚入行的策划,遇到新手引导的时候都会觉得,哇好难啊,有一种无从下手的感觉。其实只要搞清楚,何为新手引导就会发现其实设计新手引导很简单。...打个比方,如果把一个游戏比方成一台电视,那新手引导就是电视的说明书,如何快速而且简单的让玩家熟悉和玩游戏才是新手引导的前期核心,而长时间和周期性的玩游戏则是新手引导中后期核心。...现在比较常见的方案就是在新手引导中加入更多的新手活动,通过新手活动全方位引导玩家。...4.深入引导(手游不推荐) 当然也有比较深入的引导,之前一直在玩的一款端游-九阴真经,新手引导时玩家可以接触到这个游戏中比较高深的武学(技能),但只能在新手期间体验,这样玩家在进入游戏后,也会想拥有这种武学

75320

新手引导框架」升级,支持自动挂机等更多玩法!

01 将新手引导框架开源之后,陆续收到不少伙伴们的反馈,其中有一个问题是“引导脚本的自动执行,只能在浏览器上运行,感觉有些鸡肋”。...看过Shawn的GitChat文章想必你知道,新手引导自动执行可以实现自动化测试,引导脚本就是自动化测试脚本。...它是直接将一段 JS 代码嵌入已经运行的 Cocos2d-js 游戏中,如果将新手引导的自动执行能力动态嵌入一个 CocosCreator H5 游戏那将会是什么呢?—— 外挂!...新手引导框架本身不依赖于具体游戏的代码逻辑,重点只关心场景树结构、关键节点名字,要实现一个外挂的可行性非常高。...03 新手引导框架正式迁移到GitHub地址: https://github.com/ShawnZhang2015/GodGuide 「Creator星球游戏开发社区」从最早的「奎特尔星球

1.8K20

Android打造不一样的新手引导页面(一)

https://blog.csdn.net/gdutxiaoxu/article/details/52263802 Android打造不一样的新手引导页面(一) ---- 关于页面导航器的,可以查看我的这一篇博客仿网易新闻的顶部导航指示器...mCirclePageIndicator.setSnap(false); //设置小圆点的半径 mCirclePageIndicator.setRadius(10 * density); // 设置页面小圆点的颜色...mCirclePageIndicator.setPageColor(0x880000FF); // 设置移动的小圆点的颜色 mCirclePageIndicator.setFillColor(0xFF888888...); // 设置外边框的颜色 mCirclePageIndicator.setStrokeColor(0xFF000000); //设置外表框的宽度 mCirclePageIndicator.setStrokeWidth...view; mViewPager.addOnPageChangeListener(this); invalidate(); } 里面主要的逻辑简单来说就是判断我们的ViewPager是否已经设置

58810

利用这个css属性,你也能轻松实现一个新手引导

相信大家或多或少都在各种网站上使用过新手引导,当网站提供的功能有点复杂时,这是一个对新手非常友好的功能,可以跟随新手引导一步一步了解网站的各种功能,我们要做的只是点击下一步或者上一步,网站就能滚动到指定位置...基本思路 假设我们的新手引导库是一个类,名为NoviceGuide,我们可以这样使用它: new NoviceGuide({ steps: [ { element...使用DOM简单很多,修改样式比较方便,另外只要设置transition,就能轻松实现切换步骤时高亮的过渡动画效果。...this.options // ... // 原有逻辑 } else { // 当前步骤没有元素高亮元素的宽高设置成...parentRect.top // 继续向上递归 this.scrollAncestorToElement(parent) } } 结尾 本文详细的介绍了如何实现一个新手引导的功能

32430
领券