I would like to implement a radial menu using CSS3 transforms animations similar to the third demo in this page. There is an implementation in jQuery using canvas Radmenu but it doesn't move as fluidly as the flash one.
我想使用CSS3转换动画来实现一个径向菜单,类似于本页的第三个演示。 jQuery中有一个使用canvas Radmenu的实现,但它不像flash那样流畅。
First question would be: is this feasible? if possible using only 2D transforms and animations so it works in more platforms.
第一个问题是:这可行吗?如果可能的话,仅使用2D变换和动画,以便它可以在更多平台上运行。
Second question: Where to do it? the simple CSS3 examples show how to translate, shear, scale and rotate simple objects. But I have no idea where to start looking for info on how to implement a menu like the flash one.
第二个问题:在哪里做?简单的CSS3示例展示了如何平移,剪切,缩放和旋转简单对象。但我不知道从哪里开始寻找有关如何实现像flash这样的菜单的信息。
3 个解决方案
#1
1
I would have simply replied to rsilva's comment, but unfortunately I don't have enough rep, so apologies for that.
我本来只是回复了rsilva的评论,但不幸的是我没有足够的代表,所以道歉。
Please feel free to borrow/steal from http://wewillbeok.com/radial, but be warned that it's definitely not the cleanest of code and isn't documented in the slightest bit. And Yi Jiang is quite right that the animations I use perform poorly on older browsers. Removing the "zoom" animation improves performance substantially.
请随意从http://wewillbeok.com/radial借用/窃取,但要注意它绝对不是最干净的代码,并且没有任何记录。而Yi Jiang是非常正确的,我使用的动画在旧浏览器上表现不佳。删除“缩放”动画可显着提高性能。
Another well-documented and well-performing implementation is available here: http://www.webtoolkit.info/javascript-pie-menu.html, though it maybe isn't quite as "fancy."
另一个记录良好且性能良好的实现可以在这里找到:http://www.webtoolkit.info/javascript-pie-menu.html,尽管它可能并不那么“花哨”。
So to more directly answer your question, I think you would be hard pressed to create such a menu using purely CSS3 animations, if that is what you're looking for, but it's absolutely feasible with a combination of JS and CSS3. The ideal implementation most likely lies somewhere between all of the examples mentioned so far.
所以为了更直接地回答你的问题,我认为你很难用纯粹的CSS3动画制作这样一个菜单,如果这是你正在寻找的东西,但它与JS和CSS3的组合绝对可行。理想的实现很可能介于目前为止提到的所有示例之间。
#2
1
have a look here
看看这里
this turns a select into a pie menu, styleable via css, not as fancy as the above.
这会将一个选择变成一个饼图菜单,通过css设置样式,而不是像上面那样花哨。
usage: $("#your-selectbox-id").pieselmenu($(this));
#3
0
For the most part, there has to be some Javascript layer as you need to calculate the distribution of items. CSS3 can be utilized to aid the scaling and rotation on the elements by performing transforms. They work on Chrome, Safari, IE9+, FireFox 3.5+ and Opera 11+.
在大多数情况下,必须有一些Javascript层,因为您需要计算项目的分布。 CSS3可用于通过执行变换来辅助元素的缩放和旋转。它们适用于Chrome,Safari,IE9 +,FireFox 3.5+和Opera 11+。
I created a plugin a while back, the jQuery Radmenu (Radial menu) plugin. I'm working on a good demo of its use (i'm not a designer and its taking me some time), but to get an idea of the power of the plugin you can check out http://www.tikku.com/jquery-radmenu-plugin#radmenu_tutorial_4 for some examples.
我不久前创建了一个插件,jQuery Radmenu(Radial菜单)插件。我正在研究它的使用的好演示(我不是设计师,它花了我一些时间),但要想知道插件的强大功能,你可以查看http://www.tikku.com / jquery-radmenu-plugin #radmenu_tutorial_4用于一些例子。
The API spec is there and available for download. Feel free to fork it off GitHub too if you're looking to learn. https://github.com/nirvanatikku/jQuery-Radmenu-Plugin
API规范存在并可供下载。如果你想学习,请随意将它从GitHub上卸下来。 https://github.com/nirvanatikku/jQuery-Radmenu-Plugin
Feel free to ping me if you have any questions
如果您有任何疑问,请随时给我打电话
#1
1
I would have simply replied to rsilva's comment, but unfortunately I don't have enough rep, so apologies for that.
我本来只是回复了rsilva的评论,但不幸的是我没有足够的代表,所以道歉。
Please feel free to borrow/steal from http://wewillbeok.com/radial, but be warned that it's definitely not the cleanest of code and isn't documented in the slightest bit. And Yi Jiang is quite right that the animations I use perform poorly on older browsers. Removing the "zoom" animation improves performance substantially.
请随意从http://wewillbeok.com/radial借用/窃取,但要注意它绝对不是最干净的代码,并且没有任何记录。而Yi Jiang是非常正确的,我使用的动画在旧浏览器上表现不佳。删除“缩放”动画可显着提高性能。
Another well-documented and well-performing implementation is available here: http://www.webtoolkit.info/javascript-pie-menu.html, though it maybe isn't quite as "fancy."
另一个记录良好且性能良好的实现可以在这里找到:http://www.webtoolkit.info/javascript-pie-menu.html,尽管它可能并不那么“花哨”。
So to more directly answer your question, I think you would be hard pressed to create such a menu using purely CSS3 animations, if that is what you're looking for, but it's absolutely feasible with a combination of JS and CSS3. The ideal implementation most likely lies somewhere between all of the examples mentioned so far.
所以为了更直接地回答你的问题,我认为你很难用纯粹的CSS3动画制作这样一个菜单,如果这是你正在寻找的东西,但它与JS和CSS3的组合绝对可行。理想的实现很可能介于目前为止提到的所有示例之间。
#2
1
have a look here
看看这里
this turns a select into a pie menu, styleable via css, not as fancy as the above.
这会将一个选择变成一个饼图菜单,通过css设置样式,而不是像上面那样花哨。
usage: $("#your-selectbox-id").pieselmenu($(this));
#3
0
For the most part, there has to be some Javascript layer as you need to calculate the distribution of items. CSS3 can be utilized to aid the scaling and rotation on the elements by performing transforms. They work on Chrome, Safari, IE9+, FireFox 3.5+ and Opera 11+.
在大多数情况下,必须有一些Javascript层,因为您需要计算项目的分布。 CSS3可用于通过执行变换来辅助元素的缩放和旋转。它们适用于Chrome,Safari,IE9 +,FireFox 3.5+和Opera 11+。
I created a plugin a while back, the jQuery Radmenu (Radial menu) plugin. I'm working on a good demo of its use (i'm not a designer and its taking me some time), but to get an idea of the power of the plugin you can check out http://www.tikku.com/jquery-radmenu-plugin#radmenu_tutorial_4 for some examples.
我不久前创建了一个插件,jQuery Radmenu(Radial菜单)插件。我正在研究它的使用的好演示(我不是设计师,它花了我一些时间),但要想知道插件的强大功能,你可以查看http://www.tikku.com / jquery-radmenu-plugin #radmenu_tutorial_4用于一些例子。
The API spec is there and available for download. Feel free to fork it off GitHub too if you're looking to learn. https://github.com/nirvanatikku/jQuery-Radmenu-Plugin
API规范存在并可供下载。如果你想学习,请随意将它从GitHub上卸下来。 https://github.com/nirvanatikku/jQuery-Radmenu-Plugin
Feel free to ping me if you have any questions
如果您有任何疑问,请随时给我打电话