分拣机

Sorters grant you authority over visual effects that can be applied to an element and its offspring. These are highly beneficial for situation changes, such as converting a black-and-white image to color upon hovering.

Explore more about sorters and alternate effects.

在本教程中： 

1. Comprehending sorters
2. Incorporating sorters
3. Regulating conditions
4. Integrating transitions

Comprehending sorters

You have the option to select from various sorter alternatives: 

• Fuzz
• Colorize
• Intensity
• Lightness
• Difference
• Mono
• 棕褐色
• 撤销

Incorporating sorters

You can put on a sorter just as you can design any category on any element anywhere. You can apply a sorter directly on an image — you can also insert a sorter on an element that has offspring. 

As an illustration, you have 3 Link blocks, all sharing the same category (e.g., “Price link block”). 

To append a Fuzz sorter: 

1. 继续 样式面板 > 效果 > 分拣机
2. Tap the plus symbol for 分拣机
3. 选择 Fuzz 从菜单中
4. Modify the fuzz radius to regulate the fuzz levels for your element and its offspring

If you revert to the Sorter menu and switch from Fuzz to Mono, the Link blocks and their offspring turn monochromatic.

To add an illumination sorter above the monochrome sorter:

1. Tap the plus icon (+) for 分拣机
2. 选择 Intensity 从菜单中
3. Slide the Quantity slider to regulate the Intensity level

In this instance, both sorters — Mono and Intensity — are organized like strata. You can toggle the visibility of each sorter, or drag each of the layers around to modify their sequence. 

Regulating conditions

To regulate the sorter on an element while in another condition: 

1. 选择 链接块 (e.g., “Price link block”)
2. Travel to the 选择场地 在里面 风格控制板
3. 挑选 徘徊 从菜单中 

这 徘徊 condition inherits characteristics from the 没有任何 condition (which is what you were styling when you initially organized Mono 和 Intensity sorters). Therefore, those sorters remain exactly the same. 

To alter sorters in the Hover condition:

1. 前往 样式面板 > 效果 > 分拣机
2. 点击 Mono sorter you configured previously
3. Revise the Quantity to 0% (which restores the color to the Link blocks)
4. 点击 Intensity sorter
5. Revise the Intensity Quantity back to 100%

Hover across the Link blocks to witness these updated effects in motion. 

Incorporating transitions

Add a transition to smoothen the sorter effects between None and Hover conditions:

1. Navigate to the menu in the 选择场地 and switch back to 没有任何
2. 访问 样式面板 > 效果 > 过渡
3. Tap the plus symbol and insert a 过渡
4. 选择 分拣员 来自 Transition Type 菜单 

This will employ a transition to any sorter(s) you’ve arranged to alter between the None and Hover conditions. 

Experiment with the timing of the transition, and hover over the Link block to perceive the transition duration in motion. In this situation, the default of 200 milliseconds appears satisfactory. Persist in adding sorters to elements within your project, and bestow your designs some supplementary interest and interactivity! 

探索更多 styling conditions and refining the animation between conditions with 过渡.